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