JavaScript | JSON HTML - GeeksforGeeks

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-

My Personal Notes

Jun	JUL	Aug
	22
2018	2019	2020

Suggest a Topic

Recommended Posts: