Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Table insertRow() Method
The HTML DOM table insertRow() method creates an empty <tr> element and inserts it at a specified position in a table. This method is useful for dynamically adding rows to existing tables without rebuilding the entire table structure.
Syntax
Following is the syntax for the insertRow() method −
table.insertRow(index)
Parameters
The insertRow() method accepts the following parameter −
index (optional) − A number specifying the position where the new row should be inserted. If omitted or set to
-1, the row is appended at the end of the table.
Return Value
The method returns a reference to the newly created <tr> element, which can be used to add cells and content to the row.
Example − Inserting Row at Specific Position
Following example demonstrates inserting a new row at index position 1 −
<!DOCTYPE html>
<html>
<head>
<title>Insert Row at Position</title>
<style>
table { border-collapse: collapse; margin: 20px auto; }
td, th { border: 1px solid #333; padding: 8px 12px; text-align: center; }
th { background-color: #f4f4f4; }
button { padding: 8px 16px; margin: 10px; cursor: pointer; }
</style>
</head>
<body style="font-family: Arial, sans-serif; text-align: center;">
<h2>DOM Table insertRow() Method</h2>
<table id="studentTable">
<thead>
<tr>
<th>Name</th>
<th>Roll No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>071717</td>
</tr>
<tr>
<td>Jane</td>
<td>031717</td>
</tr>
</tbody>
</table>
<button onclick="insertAtPosition()">Insert Row at Position 1</button>
<script>
function insertAtPosition() {
var table = document.getElementById('studentTable');
var newRow = table.insertRow(1);
newRow.innerHTML = "<td>Maximilian</td><td>081717</td>";
}
</script>
</body>
</html>
The output shows the table with a new row inserted at position 1 (second row) −
Before click: Name | Roll No. John | 071717 Jane | 031717 After click: Name | Roll No. Maximilian | 081717 (newly inserted) John | 071717 Jane | 031717
Example − Appending Row at End
Following example shows how to append a row at the end of the table −
<!DOCTYPE html>
<html>
<head>
<title>Append Row at End</title>
<style>
table { border-collapse: collapse; margin: 20px auto; }
td, th { border: 1px solid #333; padding: 8px 12px; text-align: center; }
th { background-color: #f4f4f4; }
button { padding: 8px 16px; margin: 10px; cursor: pointer; }
</style>
</head>
<body style="font-family: Arial, sans-serif; text-align: center;">
<h2>Append Row to Table</h2>
<table id="courseTable">
<tr>
<th>Course</th>
<th>Duration</th>
</tr>
<tr>
<td>HTML</td>
<td>2 weeks</td>
</tr>
<tr>
<td>CSS</td>
<td>3 weeks</td>
</tr>
</table>
<button onclick="appendRow()">Add Course</button>
<script>
function appendRow() {
var table = document.getElementById('courseTable');
var newRow = table.insertRow(-1); // -1 appends at end
newRow.innerHTML = "<td>JavaScript</td><td>4 weeks</td>";
}
</script>
</body>
</html>
Using index -1 or omitting the parameter appends the row at the end of the table −
Before click: Course | Duration HTML | 2 weeks CSS | 3 weeks After click: Course | Duration HTML | 2 weeks CSS | 3 weeks JavaScript | 4 weeks (appended at end)
Example − Dynamic Row Creation with User Input
Following example demonstrates creating rows dynamically based on user input −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Row Creation</title>
<style>
table { border-collapse: collapse; margin: 20px auto; }
td, th { border: 1px solid #333; padding: 8px 12px; }
th { background-color: #e6f3ff; }
input { padding: 5px; margin: 5px; }
button { padding: 8px 16px; margin: 10px; cursor: pointer; }
</style>
</head>
<body style="font-family: Arial, sans-serif; text-align: center;">
<h2>Add Employee Record</h2>
<div>
<input type="text" id="empName" placeholder="Employee Name">
<input type="text" id="empId" placeholder="Employee ID">
<button onclick="addEmployee()">Add Employee</button>
</div>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Employee ID</th>
</tr>
</table>
<script>
function addEmployee() {
var name = document.getElementById('empName').value;
var empId = document.getElementById('empId').value;
if (name && empId) {
var table = document.getElementById('employeeTable');
var newRow = table.insertRow();
newRow.innerHTML = "<td>" + name + "</td><td>" + empId + "</td>";
// Clear input fields
document.getElementById('empName').value = '';
document.getElementById('empId').value = '';
}
}
</script>
</body>
</html>
This example allows users to dynamically add employee records to the table by entering data in input fields.
Key Points
Following are the important aspects to remember about the insertRow() method −
The method creates an empty
<tr>element that needs to be populated with<td>cells.Index 0 inserts at the beginning, positive numbers insert at specific positions, and -1 appends at the end.
If the specified index is greater than the number of rows, the row is appended at the end.
The returned row reference can be used to add cells using
insertCell()method or by settinginnerHTML.This method works on both
<table>and<tbody>elements.
Browser Compatibility
The insertRow() method is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 5.5+. It is part of the standard DOM specification and provides consistent behavior across platforms.
Conclusion
The HTML DOM insertRow() method provides an efficient way to dynamically add rows to tables at specific positions. It returns a reference to the newly created row element, allowing immediate population with data. This method is essential for building interactive web applications that require dynamic table manipulation.
284 Views
