Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

206
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!