Add rows to Table with JavaScript, DOM

Question

Add rows to Table with JavaScript, DOM

Navigation

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

3

I have a question, I currently have an HTML table, but I would like to add rows dynamically, I'm trying to do it in the DOM way, but I can not get it, my table looks like this:

<table border="1" id="tablaprueba">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Nombres</th>
                        <th>Ap Paterno</th>
                        <th>Ap Materno</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>

and in the following way I am trying to add rows but I do not succeed, I think I still do not understand well how to interact with DOM

function agregarFila() {

                    var Tbl = document.getElementById("tablaprueba");

                    var tblBody = Tbl.getElementsByTagName("tbody");

                    var hilera = document.createElement("tr");
                    var celda = document.createElement("td");
                    var textoCelda = document.createTextNode("celda");

                    celda.appendChild(textoCelda);
                    hilera.appendChild(celda);
                    tblBody.appendChild(hilera);
                    Tbl.appendChild(tblBody);

                }

javascript html dom

asked by Carlos Daniel Zárate Ramírez 29.08.2018 в 04:28

source

3 answers

1

With jQuery it is very simple and dynamic, it is just to put an id to tbody and ready, it would be like this:

html:

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<tbody id="tbody"></tbody>

js

function agregarFila() {


   var contendor  = $("#tbody").html();
    var nuevaFila   = '<tr>';
    nuevaFila   = '<td>"el contenido de la celda"</td>';
    nuevaFila  += '<td>"el contenido de la celda"</td>';
    nuevaFila  += '<td>"el contenido de la celda"</td>';
    nuevaFila  += '<td>"el contenido de la celda"</td>';
    nuevaFila  += '<td>"el contenido de la celda"</td>';
    nuevaFila   = '</tr>';

    ('entro poner el tabla2222');
    $("#tbody").html(contendor+nuevaFila);

}

NOTE: You must import the jquery library:

I hope it serves you! you tell me

answered by 29.08.2018 в 04:43

1

You can try it in the following way:

document.getElementById("body").innerHTML += '
<tr>
      <td>Body 1</td>
      <td>Body 2</td>
</tr>
';

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody id="body">

  </tbody>
</table>

answered by 29.08.2018 в 04:48

Absolute positioning from outside the edge send alert for if in javascript

score 3 · Accepted Answer

Assuming that the function you created is assigned to the event onclick of a button, the following would help you

function agregarFila(){
  document.getElementById("tablaprueba").insertRow(-1).innerHTML = '<td></td><td></td><td></td><td></td>';
}

function eliminarFila(){
  var table = document.getElementById("tablaprueba");
  var rowCount = table.rows.length;
  //console.log(rowCount);
  
  if(rowCount <= 1)
    alert('No se puede eliminar el encabezado');
  else
    table.deleteRow(rowCount -1);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <table border="1" class="table" id="tablaprueba">
      <thead class="thead-dark">
        <tr>
          <th>ID</th>
          <th>Nombres</th>
          <th>Ap Paterno</th>
          <th>Ap Materno</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>

    <div class="form-group">
      <button type="button" class="btn btn-primary mr-2" onclick="agregarFila()">Agregar Fila</button>
      <button type="button" class="btn btn-danger" onclick="eliminarFila()">Eliminar Fila</button>
    </div>
  </div>
</div>

I also include a button to delete rows in case you need it:)

You tell us colleague