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