JavaScript | JSON HTML

HTML table: In the HTML, tables are defined by <table> tag, table’s header are defined by <th> tag and by default table’s header are placed in center and it is bold and row of the table is defined by <tr> and the data or information of the row is defined by <td> tag.

Below code shows the demonstration of the HTML table:
Code #1:

Output:

Dynamic HTML table: The insertRow() method put an empty <tr> into the table that create a new row in that defined table. The deleteRow() method is used to remove the row from the defined table

Code #2:

Output:
Before clicking the create button-

After one time clicking the create button-

After two times clicking the create button-

HTML drop down list: A dropdown menu allows the user to choose the predefined option. It is basically a toggleable menu. For creating a drop down menu we need basics HTML, CSS and JavaScript.
Note: For getting complete result of this effect, All the below three section have to be combined.

• HTML Section: The <button>, <a> and <p> tags are used to create the dropdown menu.
  Example:

  <div class="dropdown">
    <button onclick="dropdown()" class="dropbtn">Dropdown</button>
    <div id="myDropdown" class="dropdown-content">
      <a href="#">Option 1</a>
      <a href="#">Option 2</a>
    </div>
  </div>
  
  

• CSS Section: The .dropbtn is a button for the toggelable menu, background-color set the button color, .dropbtn:hover set the hover effect on the button, position: relative; will appear the dropdown menue under the dropdown button to maintain the content using .dropdown-content.
  Example:

  
  .dropbtn {
      background-color: white;
      padding: 16px;   
  }
  .dropbtn:hover, .dropbtn:focus {
      background-color: black;
      color:white;
  }
  .dropdown {
      position: relative;   
  }
  .dropdown-content {
      display: none;
      position: absolute;
      background-color: grey;
      min-width: 97px;
      overflow: auto;   
  }
  .dropdown-content a {
      color: black;
      padding: 12px 16px;
      display: block;   
  }
  .dropdown a:hover {background-color: #ddd;}
  .show {display: block;}
  

• JavaScript:
  Example:

  function dropdown() {
      document.getElementById("myDropdown").classList.toggle("show");
  }
  
  window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {
  
      var dropdowns = document.getElementsByClassName("dropdown-content");
      var i;
      for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
  }
  

Code #3:

Output:
Before clicking the dropdown button-

After clicking the dropdown button-