Crear una tabla con jQuery
- Cree una tabla con jQuery tomando el contenido de la tabla como una cadena
- Cree una tabla con jQuery creando una instancia de tabla
Con la ayuda de la biblioteca jQuery, podemos agregar nuevas filas de tabla a nuestro contenido y crear el elemento de tabla. Haremos un trabajo de bucle básico para asegurarnos de que nuestros datos o patrones de salida estén apilados en un formato de tabla.
Examinaremos dos ejemplos, uno que tomará las etiquetas y el contenido de la tabla como una cadena. Más tarde, al agregarlo, se configurará como una tabla en el cuerpo HTML.
Sin embargo, la creación de elementos de tabla como cadenas puede dificultar la personalización posterior. Entonces, en nuestro segundo ejemplo, crearemos una instancia de un elemento de tabla y, por lo tanto, al especificar los atributos (id, “clase”), podemos cambiar las propiedades del contenido de la tabla.
Vamos a dar un control exhaustivo para entender.
Cree una tabla con jQuery tomando el contenido de la tabla como una cadena
Aquí, tomaremos una variable para almacenar la etiqueta de inicio de los elementos de la tabla, agregaremos el contenido y la etiqueta final. En el siguiente paso, agregaremos esta suma o colección de cadenas al div que consideramos.
El problema básico sería que no podemos reinicializar las propiedades de los datos de la tabla o las filas de la tabla. Revisemos las líneas de código.
Fragmento de código:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div id="tab"> </div>
<script>
var content = "<table>"
for(i=0; i<3; i++){
content += '<tr><td>' + 'output ' + i + '</td></tr>';
}
content += "</table>"
$('#tab').append(content);
</script>
Producción:
Cree una tabla con jQuery creando una instancia de tabla
Consideraremos crear la instancia para una tabla junto con su atributo id y class. Más tarde, según las preferencias, podemos cambiar las propiedades.
Las vallas de código describen esto más explícitamente.
Fragmento de código:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div id="tab"> </div>
<script>
var table = $('<table>');
for(i=0; i<3; i++){
var row = $('<tr>').text('output ' + i).addClass('rows');
row.addClass('rows').css({'color':'red'});
table.append(row);
}
$('#tab').append(table);
</script>
Producción:
