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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:
Before clicking the dropdown button-

After clicking the dropdown button-



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.