• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

187
Views
Javascript agrega una nueva línea a la tabla y reemplaza las ID

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!

almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Puedes usar reemplazar todo

 lastLine = lastLine.replaceAll("[" + oldID + "]","[" + (oldID+1) + "]")
almost 3 years ago · Juan Pablo Isaza Report

0

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>

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error