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:
