1

tengo una ventana modal en la que muestro una tabla en html, la cual quiero llenar desde javascript, ya que, con un botón envío todos los parámetros (p1,p2,p3...) de una única fila a una función. Quiero saber como puedo llenar esa tabla en html con los parámetros recibidos desde javascript. Gracias de antemano

Aclaracion: La tabla la quiero llenar con una única fila que corresponde a la fila donde está mi botón.

..................................................................................................................................................................................................................................................................

Mi tabla que se muestra en un modal:

<div class="table-responsive">
<table class="table" id="bigtab">
  <thead>
    
  <tr>
        <th></th>
        <th></th>
        <th COLSPAN=3  class="text-center">AUXILIAR</th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th colspan=3 class="text-center">VIGENCIA</th>
        <th></th>
        <th colspan=4 class="text-center">ANEXOS</th>
        <th></th>
        <th colspan=4 class="text-center">FINIQUITO</th>
        <th></th>
        <th></th>
        </tr>
  
    <tr>
      <th scope="col">ITEM</th>
      <th scope="col">UBICACION</th>
      <th scope="col">NOMBRE</th>
      <th scope="col">TIPO</th>
      <th scope="col">REGISTRO</th>
      <th scope="col">FIANZA</th>
      <th scope="col">TIPO</th>
      <th scope="col">OTORGAMIENTO</th>
      <th scope="col">MONTO</th>
      <th scope="col">DESDE</th>
      <th scope="col">HASTA</th>
      <th scope="col">ESTATUS</th>
      <th scope="col">ASEGURADORA</th>
      <th scope="col">ANEXO</th>
      <th scope="col">DESDE</th>
      <th scope="col">HASTA</th>
      <th scope="col">MONTO</th>
      <th scope="col">TECNICO</th>
            <th scope="col">OFICIO</th>
      <th scope="col">FECHA</th>
            <th scope="col">MONTO (BS.)</th>
            <th scope="col">OBSERVACIONES</th>
      <th scope="col">REVISION</th>
      <th scope="col">OPCION</th>
      
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>
</div>

funcion en la que recibo los parametros:

function prueba(p1, p2,p3,p4,p5,p6,p7,p8,p9,p10,p11,p12,p13,p14,p15,p16,p17,p18,p19,p20,p21,p22,p23){
        var item=p1;
        var ubicacion=p2;
        var nombre=p3;
        var tipoaux=p4;
        var registro=p5;
        var fianza=p6;
        var fianzatype=p7;
        var fechaotor=p8;
        var monto=p9;
        var desde=p10;
        var hasta=p11;
        var estatus=p12;
        var anexo=p13;
        var desde2=p14;
        var hasta2=p15;
        var monto2=p16;
        var aseguradora=p17;
        var tecnico=p18;
        var oficio=p19;
        var fechaof=p20;
        var montoofi=p21;
        var observaciones=p22;
        var revision=p23;
        
        $("#AddDate").modal("show");
        
    };
1

2 respuestas 2

2

hace muy poco hice algo parecido, la solucion que le encontre fue darle una clase(puede ser un id) al tbody y en base a eso, crear una variable js con queryselector. creé otra vatiable para armar las td con codigo html directamente, por ultimo, inyecté el codigo html en la variable del tbody con concatenacion al innerhtml. Sería algo asi: en HTML

<tbody id="body">

en JS:

//Llamas al tbody:
const $body=document.getElementById("body")

//Creas las td con puro codigo HTML:
let data=`
<td>${item}</td>
<td>${ubicacion}</td>
<td>${nombre}</td>
<td>${tipoaux}</td>
<td>${registro}</td>
y asi hasta completar todos los datos
`

//Inyectas el codigo HTML en el body:
$body.innerHTML=data

1

Si lo que buscas es crearlo con JavaScript debes primero obtener la table que estas trabjando esto lo puedes hacer con document.getElementById, luego, debes ir creando los elementos que vas a necesitar para mostrar la información, en este caso debe ser un elemento que va representar el body de la table, luego una fila con el elemento , tendiendo creada la fila, creas un for para recorrer cada uno de los parámetros que enviaste y dentro vas creando un elemento que es la celda y adjuntas a cada celda el valor del elemento que enviaste con la función document.createTextNode. Por último haces un append de cada celda a tu fila, haces un append de tu fila al tbody, y haces un append de tu tbody a tu table.

function prueba(...args) {    
    let table = document.getElementById("bigtab");
    let tbody = document.createElement('tbody');
    let ttr = document.createElement('tr');

    for(let arg of args) {
        let ttd = document.createElement('td');
        ttd.appendChild(document.createTextNode(arg));
        ttr.appendChild(ttd);
    }

    tbody.appendChild(ttr);
    table.appendChild(tbody);

    $("#AddDate").modal("show"); 
}

prueba(p1, p2,p3,p4,p5,p6,p7,p8,p9,p10,p11,p12,p13,p14,p15,p16,p17,p18,p19,p20,p21,p22,p23);
1
  • Tal y como está redactada, tu respuesta no es clara. Por favor, pulsa en editar para añadir detalles adicionales que ayuden a los demás a entender cómo esto responde a la pregunta formulada. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 6 jun. 2023 a las 21:14

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.