CODEWITHSUNDEEP
javascriptstringtype-conversiontagshref
mollieda
mollieda

Reputation: 79

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

Upvotes: 0

Views: 771

Answers (1)

FrostyZombi3
FrostyZombi3

Reputation: 629

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>

Upvotes: 1

Related Questions