0
211
Views¿Cómo convertir un valor de texto específico de la tabla HTML en un enlace href (etiqueta <a>) usando Javascript?
En la página de inicio de mi aplicación Flask, tengo una tabla HTML cuyos valores de la última columna pueden ser texto que se puede esquematizar de la siguiente manera: 
Ahora estoy tratando de usar Javascript para convertir todos los valores de "Editar problema" en la tabla HTML mediante un enlace href que me permitiría una vez que haga clic en este enlace para acceder a otra página HTML. Para hacer esto, hago un bucle en cada fila de la tabla HTML y coloco un enlace HTML dentro de la celda. Desafortunadamente, cuando ejecuto el siguiente código, aparece un error de mapa de origen:
Encuentre a continuación mi código JS:
function convert_cellTable(){ let table=document.getElementsByTagName("table").value; let row, rows = table.rows; let cell, cells; // For each row in the table for (var i=0, iLen=rows.length; i<iLen; i++) { row = rows[i]; cells = row.cells; // Identify in each cell if the text content equal to "Edit Issue" for (var j=0, jLen=cells.length; j<jLen; j++) { cell = cells[j]; let TextToConvert = "Edit Issue" if (cells[j].textContent == TextToConvert) { // cell text is replaced by an HTML link cell[j].innerHTML = "<a href='updateform.html'>Edit Issue</a>"; } } } }¿Podría proporcionarme pautas para corregir el código anterior? Gracias
1 answers
Answer question0
Si el número de columnas es conocido o fijo, puede seleccionar todos los elementos td de la última columna y luego recorrerlos para actualizar el innerHTML en consecuencia.
const lastColumnCells = document.querySelectorAll('table td:nth-child(5)'); // Assuming column 5 of table lastColumnCells.forEach(cell => { if (cell.innerText === 'Edit Issue') { cell.innerHTML = '<a href="updateform.html">Edit Issue</a>'; } }) table { border-collapse: collapse; } th, td { border: 1px solid black; padding: 4px; } <table> <thead> <th>Header1</th> <th>Header2</th> <th>Header3</th> <th>Header4</th> <th>Edit</th> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td>Edit Issue</td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td>Edit Issue</td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td>Edit Issue</td> </tr> </tbody> </table>