Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

214
Vistas
How to convert in HTML table specific text valule into a href link (<a> tag) by using Javascript?

On the homepage of my Flask application, I have an HTML table whose last column values can be text which can be schematized as follows: enter image description here

I am now trying to use Javascript to convert all the "Edit Issue" values in the HTML table by an href link that would allow me once I click on this link to access another HTML page. For doing this, I loop every row in the HTML table and put HTML link inside cell. Unfortunately, when I run the code below, I get a source map error:

Please find below my JS code:

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>";
  }
 }
 }
}  

Could you please provide me guidelines to correct the code above. Thanks

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

If the number of columns is known or is fixed, you could select all of the last column td elements, then loop through those to update the innerHTML accordingly.

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>

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda