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
    – Eztronics
    Commented 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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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