Certainly! You can append a new row to an HTML table using JavaScript. Here's an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Append Row to Table in JavaScript</title>
</head>
<body>
<table id="myTable" border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
<button onclick="appendRow()">Add Row</button>
<script>
function appendRow() {
// Get the reference to the table
var table = document.getElementById("myTable").getElementsByTagName('tbody')[0];
// Create a new row
var newRow = table.insertRow(table.rows.length);
// Insert cells into the new row
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
// Add data to the cells
cell1.innerHTML = "New Name";
cell2.innerHTML = "New Age";
cell3.innerHTML = "New City";
}
</script>
</body>
</html>
In this example:
The table has an existing structure with headers and some rows.
The appendRow function is called when the "Add Row" button is clicked.
Inside the function, a reference to the table's <tbody> is obtained.
A new row (<tr>) is created using insertRow() on the table's
<tbody>.
Cells (<td>) are added to the new row using insertCell().
Data is added to the cells using the innerHTML property.
When you click the "Add Row" button, a new row will be appended to the table with the specified data. You can customize this example based on your specific requirements.
Join MindStick Community
You need to log in or register to vote on answers or questions.
We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
Privacy Policy.
Certainly! You can append a new row to an HTML table using JavaScript. Here's an example:
In this example:
When you click the "Add Row" button, a new row will be appended to the table with the specified data. You can customize this example based on your specific requirements.