如何使用 Javascript 将 HTML table 中的特定文本值转换为 href link（<a> 标签）？

Question

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

我现在正在尝试使用 Javascript 将 HTML table 中的所有“编辑问题”值转换为允许我一次的 href link我单击此 link 以访问另一个 HTML 页面。为此，我循环 HTML table 中的每一行并将 HTML link 放入单元格中。不幸的是，当我运行下面的代码时，出现源映射错误：

请在下面找到我的 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

如果列数已知或固定，您可以 select 所有最后一列 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>

如何使用 Javascript 将 HTML table 中的特定文本值转换为 href link（<a> 标签）？

How to convert in HTML table specific text valule into a href link (<a> tag) by using Javascript?

javascript

tags

string

href

type-conversion