The HTML DOM Table object represents an HTML <table> element in the Document Object Model (DOM). It provides properties and methods to manipulate tables, such as adding or deleting rows and columns, accessing individual cells, or modifying the table's structure dynamically.
Syntax:
To access table element.:
document.getElementById("id");To create a table object:
document.createElement("TABLE");Properties:
- rows: Returns a collection of all <tr> elements (rows) in the table.
- tBodies: Returns a collection of all <tbody> elements in the table.
- caption: Gets or sets the <caption> element of the table.
- tHead: Gets or sets the <thead> element of the table.
- tFoot: Gets or sets the <tfoot> element of the table.
Methods:
- createTHead(): Creates a <thead> element in the table.
- deleteTHead(): Removes the <thead> element from the table.
- createTFoot(): Creates a <tfoot> element in the table.
- deleteTFoot(): Removes the <tfoot> element from the table.
- insertRow(index): Inserts a new row at the specified index.
- deleteRow(index): Deletes a row at the specified index.
Example 1: The below example accessing table and add row new row in table element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>HTML Table Object </title>
</head>
<body>
<table id="myTable" border="1">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</tbody>
</table>
<button onclick="addRow()">Add Row</button>
<script>
function addRow() {
// Get the table by its ID
let table = document.getElementById("myTable");
// Insert a new row at the end of the table
let newRow = table.insertRow();
// Insert cells in the new row
let cell1 = newRow.insertCell(0);
let cell2 = newRow.insertCell(1);
// Add text content to the new cells
cell1.textContent = "New Row, Cell 1";
cell2.textContent = "New Row, Cell 2";
}
</script>
</body>
</html>
Output:
Example 2: Creating a table element and add new row using JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Object Example</title>
</head>
<body>
<button onclick="addRow()">Add Row</button>
<script>
// Create table element
let table = document.createElement("TABLE");
table.setAttribute("id", "MyTable");
table.setAttribute("border", "1");
document.body.appendChild(table);
// Create header row
let headerRow = document.createElement("TR");
let headerCell1 = document.createElement("TH");
let headerCell2 = document.createElement("TH");
headerCell1.textContent = "Header 1";
headerCell2.textContent = "Header 2";
headerRow.appendChild(headerCell1);
headerRow.appendChild(headerCell2);
// Add header row to the table
table.appendChild(headerRow);
function addRow() {
// Get the table element by its ID
let table = document.getElementById("MyTable");
// Check if the table exists
if (!table) {
alert("Please create the table first.");
return;
}
// Insert a new row at the end of the table
let newRow = document.createElement("TR");
// Insert cells in the new row
let cell1 = document.createElement("TD");
let cell2 = document.createElement("TD");
// Add text content to the new cells
cell1.textContent = "New Row, Cell 1";
cell2.textContent = "New Row, Cell 2";
// Append cells to the new row
newRow.appendChild(cell1);
newRow.appendChild(cell2);
// Append the new row to the table
table.appendChild(newRow);
}
</script>
</body>
</html>
Output:
Supported Browsers:
- Opera
- Google Chrome
- Firefox
- Apple Safari