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 toggleable menu, background-color set the button color, .dropbtn:hover set the hover effect on the button, position: relative; will appear the dropdown menu 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-