jQuery se puede usar para agregar filas de tablas dinámicamente. Esto se puede usar en aplicaciones web donde el usuario puede necesitar agregar más filas si es necesario.
Pasos para agregar una fila de tabla:
- Se construye el marcado requerido para la fila.
markup ="<tr><td> + information + </td></tr>" - Se selecciona el cuerpo de la tabla al que se agregarán las filas de la tabla.
tableBody = $("table tbody") - Finalmente, el marcado se agrega al cuerpo de la tabla.
tableBody.append(markup)
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to add table row in jQuery?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
table {
margin: 25px 0;
width: 200px;
}
table th, table td {
padding: 10px;
text-align: center;
}
table, th, td {
border: 1px solid;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksForGeeks
</h1>
<b>How to add table row in jQuery?</b>
<p>
Click on the button below to
add a row to the table
</p>
<button class="add-row">
Add row
</button>
<table>
<thead>
<tr>
<th>Rows</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is row 0</td>
</tr>
</tbody>
</table>
<!-- Script to add table row -->
<script>
let lineNo = 1;
$(document).ready(function () {
$(".add-row").click(function () {
markup = "<tr><td>This is row "
+ lineNo + "</td></tr>";
tableBody = $("table tbody");
tableBody.append(markup);
lineNo++;
});
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón 4 veces:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA