How to insert new row at a certain index in a table in jQuery ?
Last Updated :
28 Jun, 2019
Given an HTML document containing a table. The task is to insert a new row in that table at a certain index using JQuery.
Approach:
- Store the table column value <td> element into the variable.
- Then use eq() and after() method to insert the row in a table.
Example 1: In this example, the row is inserted at index 1 (hardcoded).
<!DOCTYPE HTML>
<html>
<head>
<title>
Insert new row at a certain index
in a table using jQuery
</title>
<script src =
</script>
<style>
#myCol {
background:green;
}
table {
color:white;
}
#Geek_p {
color:green;
font-size:30px;
}
td {
padding:10px;
}
</style>
</head>
<body>
<center>
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<strong>
Click on the button to insert
a new row in the table
</strong>
<br><br>
<table>
<colgroup>
<col id="myCol"
span="2">
<col style="background-color:green">
</colgroup>
<tr>
<th>S.No</th>
<th>Title</th>
<th>Geek_id</th>
</tr>
<tr id = "row1">
<td>Geek_1</td>
<td>GeekForGeeks</td>
<th>Geek_id_1</th>
</tr>
<tr>
<td>Geek_3</td>
<td>GeeksForGeeks</td>
<th>Geek_id_3</th>
</tr>
</table>
<br>
<button onclick = "Geeks()">
Click here
</button>
<script>
function Geeks() {
var html =
"<td>Geek_2</td><td>GeeksForGeeks</td><th>Geek_id_2</th>";
$('table > tbody > tr').eq(1).after(html);
}
</script>
</center>
</body>
</html>
|
Output:
-
Before clicking on the button:
-
After clicking on the button:
Example 2: In this example, the row is inserted at index provided by the user.
<!DOCTYPE HTML>
<html>
<head>
<title>
Insert new row at a certain index
in a table using jQuery
</title>
<script src =
</script>
<style>
#myCol {
background:green;
}
table {
color:white;
}
#Geek_p {
color:green;
font-size:30px;
}
td {
padding:10px;
}
</style>
</head>
<body>
<center>
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<strong>
Click on the button to insert
a new row in the table
</strong>
<br><br>
<table>
<colgroup>
<col id="myCol"
span="2">
<col style="background-color:green">
</colgroup>
<tr>
<th>S.No</th>
<th>Title</th>
<th>Geek_id</th>
</tr>
<tr id = "row1">
<td>Geek_1</td>
<td>GeekForGeeks</td>
<th>Geek_id_1</th>
</tr>
<tr>
<td>Geek_3</td>
<td>GeeksForGeeks</td>
<th>Geek_id_3</th>
</tr>
</table>
<br>
<button onclick = "Geeks()">
Click here
</button>
<script>
function Geeks() {
var i = 2;
var html =
"<td>Geek_2</td><td>GeeksForGeeks</td><th>Geek_id_2</th>";
$('table > tbody > tr').eq(i - 1).after(html);
}
</script>
</center>
</body>
</html>
|
Output:
-
Before clicking on the button:
-
After clicking on the button:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...