Derecha. Entonces, muchachos, estoy atrapado con un problema simple que no puedo resolver por mi vida. Estoy tratando de insertar una nueva fila (usando datos de respuesta de una llamada AJAX) al final de una tabla de Bootstrap usando JavaScript. Estoy usando una función simple como esa;
function insertRow(data) { let tbody = document.querySelector('tbody'); let spacer = document.createElement('tr'); let tr = document.createElement('tr'); // append rows to table tbody.appendChild(spacer); tbody.appendChild(tr); // apply styles tr.className = 'rounded-3 card-body shadow-sm reg-rows'; spacer.className = 'spacer'; spacer.style.height = '6px'; let id_input = document.createElement("input"); spacer.appendChild(id_input); id_input.value = `${data.identifier}`; id_input.name = "keys_array[]"; id_input.type = "hidden"; let cells_array = new Array(); // create cells var td_id, td_ba, td_code, td_num; td_id = td_ba = td_code = td_num = document.createElement('td'); // append cells to row tr.append(td_id, td_ba, td_code, td_num); // add cells to array cells_array.push(td_id, td_ba, td_code, td_num); Array.prototype.slice.call(cells_array) .forEach(function(cell) { cell.className = "p-1 border-0"; tr.appendChild(cell); }); td_status.classList.add("rounded-end"); let div = document.createElement("div"); let input = document.createElement("input"); input.className = "form-check-input position-static"; input.name = "some_action[]"; input.type = "checkbox"; div.appendChild(input); td_status.appendChild(div); // write text to cells td_id.innerHTML = `${data.id}`; td_ba.innerHTML = `${data.ba}`; td_code.innerHTML = `${data.code}`; td_num.innerHTML = `${data.num}`; }El problema es que solo la última celda (en este caso, td_num ) se inserta en la fila recién creada cuando llamo a la función, y se inserta como la primera.
Intenté usar appendChild para agregar cada celda individualmente a la nueva fila, pero eso tampoco.
Incluso intenté cambiar el orden en que se crean y agregan las celdas, pero no funcionó. ¿Qué podría estar haciendo mal? Gracias.
Estás creando 3 referencias para un mismo Element en esta línea:
td_id = td_ba = td_code = td_num = document.createElement('td'); Es decir, el único document.createElement('td') creado aquí se puede llamar con td_id , td_ba y td_code . No está creando 3 td aquí, solo uno con 3 referencias.
Si desea crear 3 elementos, debe crearlos para cada variable
[ td_id, td_ba, td_code ].map(myVarRef => myVarRef = document.createElement('td'))<html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"> </script> <script> function insertRow() { let data = [{ cell1: "3", cell2: "Item 3", cell3: "$3" }, { cell1: "4", cell2: "Item 4", cell3: "$4" }]; // I choose table body over table by adding an ID specifically let table_body = document.getElementById("tbody_id"); for (let i = 0; i < data.length; i++) { // Create an empty <tr> element and add it to the last position of the table: let row = table_body.insertRow(-1); // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element: let cell1 = row.insertCell(0); let cell2 = row.insertCell(1); let cell3 = row.insertCell(2); // Add some text to the new cells: cell1.innerHTML = data[i].cell1; cell2.innerHTML = data[i].cell2; cell3.innerHTML = data[i].cell3; } } </script> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-3"> <button type="button" onclick="insertRow()" class="btn btn-primary">Click Me</button> </div> </div> <div class="row"> <div class="col-sm"> <table data-toggle="table" id="test-table"> <thead> <tr> <th>Item ID</th> <th>Item Name</th> <th>Item Price</th> </tr> </thead> <tbody id="tbody_id"> <tr> <td>1</td> <td>Item 1</td> <td>$1</td> </tr> <tr> <td>2</td> <td>Item 2</td> <td>$2</td> </tr> </tbody> </table> </div> </div> </div> </body> </html>Creé una muestra que puedes ejecutar directamente. Espero que esto ayude. Agregué comentarios en el código en sí para una mejor comprensión, al insertar una fila, puede dar -1 para agregar en la parte inferior del cuerpo de la tabla.