1

tengo una duda, tengo una función en JavaScript para generar tablas, de la siguiente manera:

 function AgregarTabla(idContenedor, idTabla) {

            var htmlTabla;
            htmlTabla=
                    "<table id = '" + idTabla + "'>\n\
                <thead>\n\
                    <tr bgcolor='FFFDC1'>\n\
                        <th>Columna 1</th>\n\
                        <th>Column 2</th>\n\
                        <th>Columna 3</th>\n\
                    </tr>\n\
                </thead>\n\
            </table>";

            $("#" + idContenedor).append(GenerarTabla);

        }

Como abran notado está escrito en formato de texto/html, pero me gustaría saber si hay alguna forma de escribir lo mismo pero en formato JQuery. Entiendo que se debería hacer algo así:

       var jQueryTabla = $("<table></table>");
       jQueryTabla.attr({
       id:idTabla});

       $("#" + idContenedor).append(GenerarTabla);

Pero de ahí ya no sé como agregar los tr y th.

De antemano muchas gracias. Saludos.

1
  • Si la idea es generar tablas de forma dinámica creo que te convendría estudiar la posibilidad de utilizar las "datatables" que utilizan jquery para su funcionamiento. Puedes descargar el plug-in de datatables y un ejemplo sencillo de uso lo puedes observar en la siguiente pregunta datatables paginación allí encontrarás mi respuesta donde suministro un ejemplo bastante básico de la estructura a seguir para utilizar las datatables
    – Art_Code
    el 26 jun. 2018 a las 12:15

2 respuestas 2

1

No estoy muy seguro de entender tu pregunta, pero si lo único que quieres es insertar elementos en tu tabla mediante jQuery puedes usar el método append()

var jQueryTabla = $("<table></table>");
       jQueryTabla.attr({
       id:"idtabla"});
       
function addRow(){
  var nuevoTr = "<tr bgcolor='FFFDC1'><th>Columna 1</th><th>Column 2</th><th>Columna 3</th></tr>";
  jQueryTabla.append(  nuevoTr );
}
$("#contenedor").append(jQueryTabla);
$("#addRow").click(function(){
	addRow();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contenedor">
</div>
<button id="addRow">
  Agregar fila
</button>

1

Supongo que le quieres agregar dinamicidad a la tabla, una forma es con un bucle y en cada iteración añades un nuevo th. De la siguiente forma:

"use strict";
function generarTabla(){
    let $tr = $("<tr></tr>");
    //$tr.attr("bgcolor", "FFFDC1");
    $tr.css("background-color", "#FFFDC1");
    let $th;
    let i = 0;
    while (i++ < 3){
        $th = $(`<th>columna ${i}</th>`);
        $tr.append($th);
    }
    return $tr;
}
function agregarTabla(id_contenedor, id_tabla){
    const $tabla = $("<table></table>");
    $tabla.attr("id", id_tabla);
    $tabla.append(generarTabla());
    $("#" + id_contenedor).html($tabla);
}
$('document').ready(() => {
    $("#btn-agregar-tabla").click(() => agregarTabla("contenedor", "id-tabla"));
})
    <div id="contenedor"></div>
    <input type="button" value="Agregar tabla" id="btn-agregar-tabla">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Espero haberte sido de ayuda.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.