0

la verdad estoy bastante perdida con esto de las tablas y JavaScript, lo que deseo saber es como ingresar o mejor dicho crear filas a una tabla creada con Boostrap, y a la vez ingresarle ciertos datos. La estructura de las filas a crear seria esta;

<tr> <th scope="row">dato</th> <td>dato</td> <td>dato</td> <td>dato</td> </tr>

dejo el codigo de la tabla estandar de boostrap a la cual requiero hacerle el ingreso de filas y a la vez datos.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
          <thead class="thead-dark">
            <tr>
              <th scope="col">cal 1</th>
              <th scope="col">cal 2</th>
              <th scope="col">cal 3</th>
              <th scope="col">cal 4</th>
            </tr>
          </thead>
          <tbody>
             <!-- aqui ingresar las filas --> 
          </tbody>
        </table>

2
  • De donde vas a sacar los datos que quieres ingresar?
    – alanfcm
    Commented el 31 may. 2018 a las 23:57
  • son cálculos, el valor inicial lo tomare del mismo DOM y lo procesare con JavaScript, son varios resultado, y es lo que deseo ingresar a la tabla.
    – Gabriela
    Commented el 1 jun. 2018 a las 0:02

2 respuestas 2

1

Si mal no entendí vos querés desde javascript ingresar filas a la tabla que tenes con bootstrap no?.

En caso de que te haya entendido bien, tenes varias formas de hacerlo. Te paso dos que se me ocurren en este momento:

1) Armar el html en una variable e insertarlo.

var html = '<tr>';
html += '<th scope="row">dato</th>';
html += '<td>dato1</td>';
html += '<td>dato2</td>';
html += '<td>dato3</td>';
html += '</tr>';

$('table tbody').html(html);

Recorda que tambien podes agregar un id a la tabla (ej: id="myTable") y despues en javascript buscarla asi: $('#myTable tbody')

2) Armar fila por fila e insertarlas con la funcion "append" de jquery.

var html = '<tr>';
html += '<th scope="row">dato</th>';
html += '<td>dato1</td>';
html += '<td>dato2</td>';
html += '<td>dato3</td>';
html += '</tr>';

$('table tbody').append(html);

Recorda que para esto tenes que descargar jquery. Lo podes hacer desde la pagina oficial.

Espero que te sea de utilidad lo que te dije. Saludos

1
  • gracias por tu respuesta, logre solucionar de una manera mucho mas corta.. gracias.
    – Gabriela
    Commented el 1 jun. 2018 a las 2:23
1

he logrado resolver de la siguiente manera.

var dato1 = 1; var dato2 = 2; var dato3 = 3;
var row="<tr><td>"+ dato1 +"</td><td>"+dato2 +"</td><td>"+ dato3; var ins = document.createElement("TR"); ins.innerHTML = row; document.getElementById("table").appendChild(ins);

gracias a todos por la 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.