javascriptstringtype-conversiontagshref

How to convert an HTML table specific text value 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


Solution

  • 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>