How to insert new row at a certain index in a table in jQuery ? - GeeksforGeeks

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 = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">        </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 = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">        </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:
jQuery-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript
Differences between Functional Components and Class Components in React
How to Use the JavaScript Fetch API to Get Data?
Difference Between PUT and PATCH Request
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?