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;}
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 >
|
Output: Before clicking the dropdown button- After clicking the dropdown button-
Share your thoughts in the comments
Please Login to comment...