JavaScript | JSON HTML

Last Updated : 13 Sep, 2022

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:

javascript

<!DOCTYPE html>
<html>
<body>
 
<table style="width:50%">
  <tr>
    <th>First_name</th>
    <th>Last_name</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Priya</td>
    <td>Sharma</td>
    <td>24</td>
  </tr>
  <tr>
    <td>Arun</td>
    <td>Singh</td>
    <td>32</td>
  </tr>
  <tr>
    <td>Sam</td>
    <td>Watson</td>
    <td>41</td>
  </tr>
</table>
 
</body>
</html>

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:

html

<html>

<head>
    <style>

    </style>
</head>

<body>
    <p>Click the button to perform the function:</p>
    <table id="tablecreate">
        <tr>
            <th>First_Column</th>
            <th>Second_Column</th>
        </tr>
    </table>
    <br>
    <button onclick="create()">Create</button>

    <script>
        function create() {
            var table = document.getElementById("tablecreate");
            var row = table.insertRow(0);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            cell1.innerHTML = "New Column-1";
            cell2.innerHTML = "New Column-2";
        }
    </script>
</body>

</html>

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:

html

<html>

<head>
    <style>
        .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;
        }
    </style>
    <script>
        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');
                    }
                }
            }
        }
    </script>

</head>

<body>
    <p>Click the Dropdown button to see the options:</p>
    <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>
</body>

</html>