How to create rows and enter data Boostrap

Question

How to create rows and enter data Boostrap

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

the truth is I'm pretty lost with this tables and JavaScript, what I want to know is how to enter or rather create rows to a table created with Boostrap, and at the same time enter certain data. The structure of the rows to create would be this;

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

I leave the code of the standard table of boostrap to which I require to make the entry of rows and at the same time data.

<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>

javascript

asked by Gabriela 01.06.2018 в 01:52

source

2 answers

IONIC checkbox list Define an array with default values in PHP

score 1 · Answer 1

If I misunderstood you want from javascript to enter rows to the table that you have with bootstrap no?.

In case you have understood correctly, you have several ways to do it. I'll give you two that I can think of right now:

1) Put the html in a variable and insert it.

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);

Remember that you can also add an id to the table (ex: id="myTable") and then in javascript find it like this: $ ('# myTable tbody')

2) Arm row by row and insert them with the "append" function of 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);

Remember that for this you have to download jquery. You can do it from the official website.

I hope that what I told you will be useful for you. Greetings

score 1 · Answer 2

I have managed to solve in the following way.

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);

thanks everyone for the help.