How to insert new row at a certain index in a table in jQuery ?
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 to insert new row in a table --> <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 to insert new row in a table --> <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:
