¿Cómo insertar una nueva fila en un índice determinado en una tabla en jQuery?

Dado un documento HTML que contiene una tabla. La tarea es insertar una nueva fila en esa tabla en un índice determinado usando JQuery.

Acercarse:

  • Almacene el elemento <td> del valor de la columna de la tabla en la variable.
  • Luego use el método eq() y after() para insertar la fila en una tabla.

Ejemplo 1: en este ejemplo, la fila se inserta en el índice 1 (codificado).

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

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Ejemplo 2: en este ejemplo, la fila se inserta en el índice proporcionado por el usuario.

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

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Publicación traducida automáticamente

Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *