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
How to insert new row into table at a certain index using jQuery?
To insert a new row into a table at a certain index, use jQuery methods like insertBefore(), after(), or before() along with proper row selection. The key is to target the specific row position where you want to insert the new content.
Example
The following example demonstrates how to insert a new row at a specific index in a table. You can specify the index position and click the button to add a row at that location −
<!DOCTYPE html>
<html>
<head>
<title>jQuery Insert Row Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
input, button {
margin: 10px 5px;
padding: 5px;
}
</style>
<script>
$(document).ready(function(){
// Set default index value
$('#index').val(1);
$('#btn1').click(function(){
var indx = parseInt($('#index').val());
var totalRows = $('#myTable tbody tr').length;
// Create new row
var newRow = $('<tr><td>New row inserted at position ' + indx + '</td></tr>');
// Insert at specific position
if (indx <= 1) {
// Insert at beginning
$('#myTable tbody').prepend(newRow);
} else if (indx > totalRows) {
// Insert at end
$('#myTable tbody').append(newRow);
} else {
// Insert at specific index
newRow.insertBefore($('#myTable tbody tr:nth-child(' + indx + ')'));
}
});
});
</script>
</head>
<body>
<h3>Insert Row at Specific Index</h3>
<table id="myTable">
<thead>
<tr>
<th>Table Content</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is row 1</td>
</tr>
<tr>
<td>This is row 2</td>
</tr>
<tr>
<td>This is row 3</td>
</tr>
</tbody>
</table>
<p>
<label for="index">Insert at position:</label>
<input type="number" id="index" min="1" max="10"/>
<button type="button" id="btn1">Add Row</button>
</p>
</body>
</html>
How It Works
The code uses the insertBefore() method to place a new row before the existing row at the specified index. The nth-child selector targets the specific row position, while proper validation ensures the row is inserted correctly whether at the beginning, middle, or end of the table.
This approach gives you precise control over where new table rows are positioned, making it ideal for dynamic table manipulation in web applications.
2K+ Views
