Soy un programador aficionado y lucho con el siguiente problema: obtuve un elemento de tabla con algunas filas, cada fila con 3 celdas. A través de un botón en la parte inferior, me gustaría agregar filas. La tabla se ve así:
<table id="mytable"> <tr id="line[0]"><td id="cellA[0]"</td><td id="cellB[0]"</td><td id="cellC[0]"</td></tr> <tr id="line[1]"><td id="cellA[1]"</td><td id="cellB[1]"</td><td id="cellC[1]"</td></tr> <tr id="line[2]"><td id="cellA[2]"</td><td id="cellB[2]"</td><td id="cellC[2]"</td></tr> </table>Recorro con elementbyID "línea" para encontrar que la última línea es [2]. Y luego agregue una nueva línea como esta:
var table = document.getElementById("mytable"); var row = table.insertRow(oldID + 1); row.setAttribute("id","line["+ oldID + 1 + "]");Esto funciona muy bien.
Luego obtengo el contenido de la última línea a través de var lastLine = document.getElementById(oldID).innerHTML. Ahora que los td ID son cellA[2], cellB[2] y cellC[2]. Me gustaría reemplazarlos con [3].
Intenté lo siguiente:
var oldVar = "[" + oldID + "]"; var newVar = "[" + oldID + 1 + "]"; var regex = new RegExp(oldVar, "g"); var neueLine = lastLine.replace(regex, newVar);pero esto da como resultado identificadores como este "cellA[3][3]", "cellB[3][3]" y "cellC[3][3]".
Siento que mi conocimiento limitado se está perdiendo la supuesta forma de hacer esto.
¡Muchas gracias por tu ayuda!
Puedes usar reemplazar todo
lastLine = lastLine.replaceAll("[" + oldID + "]","[" + (oldID+1) + "]")Esto funcionará: posiblemente se pueda codificar en menos instrucciones, pero es muy legible. También arreglé el HTML inválido
window.addEventListener("load", function() { const table = document.querySelector("#mytable tbody"); document.getElementById("add").addEventListener("click", function() { const lastRow = table.querySelector("tr:last-child") let id = +lastRow.id.replace(/\D+/g, ""); // grab and convert to number let newId = id+1; const newLine = lastRow.cloneNode(true); newLine.id = newLine.id.replace(id,newId); newLine.querySelectorAll("td").forEach(cell => cell.id = cell.id.replace(id,newId)) table.appendChild(newLine) }) }) <input type="button" id="add" value="Add" /> <table id="mytable"> <tbody> <tr id="line[0]"> <td id="cellA[0]">A</td> <td id="cellB[0]">B </td> <td id="cellC[0]">C</td> </tr> <tr id="line[1]"> <td id="cellA[1]">A </td> <td id="cellB[1]">B</td> <td id="cellC[1]">C </td> </tr> <tr id="line[2]"> <td id="cellA[2]">A</td> <td id="cellB[2]">B</td> <td id="cellC[2]">C</td> </tr> </tbody> </table>