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).

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.