Skip to content
Related Articles

Related Articles

Improve Article

JavaScript | JSON HTML

  • Last Updated : 10 Sep, 2018

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:




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




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

Output:
Before clicking the dropdown button-

After clicking the dropdown button-

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :