如何使用 Javascript 将 HTML 表特定文本值转换为 href 链接（ 标记）？

Question

在我的 Flask 应用程序的主页上，我有一个 HTML 表，其最后一列值可以是文本，其模式化如下：

我现在尝试使用 JavaScript 通过 href 链接转换 HTML 表中的所有“编辑问题”值，一旦我单击此链接即可访问另一个 HTML 页面。为此，我循环 HTML 表中的每一行并将 HTML 链接放入单元格内。不幸的是，当我运行下面的代码时，我收到源映射错误：

请在下面找到我的 JS 代码：

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

您能否为我提供指导来更正上面的代码。谢谢

Answer 1

如果列数已知或固定，您可以选择最后一列的所有 td 元素，然后循环遍历这些元素以相应地更新 innerHTML。

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>