单元格中的超链接文本

问题描述 投票：0回答：1

如何在现有表格的单元格中设置超链接文本？我的 

<td>
元素有一个子 
<a>
，它是要在表格中显示的文本，并且具有链接的 href 属性，但在制表符表格单元格中获取 
<td>
的 innerHTML 并显示 
<a> 的 externalHTML
。如有任何帮助，我们将不胜感激！

我加载了制表器来查看现有的表格。我的表的 id 为“table”，我用来执行此操作的 js 来自示例 

var table = new Tabulator("#table", {});
一旦加载具有超链接文本 
<a>
元素的单元格，就会显示 externalHTML。

编辑：这是我遇到问题的示例。

javascript html tabulator
1个回答
0
投票

您可以使用 Tabulator 的 

rowFormatter
回调来迭代每一行并更改该行单元格元素的显示方式。下面的示例找到表格中每行的第一个单元格，并将该单元格的innerHTML作为链接。

let table = new Tabulator("#table", {
  rowFormatter: (row) => {
    let col_1 = row.getCells()[0]

    col_1.getElement().innerHTML = col_1.getValue()
  }
});
<html>

<head>
  <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
  <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
</head>

<body>
  <table id="table">
    <thead>
      <tr>
        <th>column 1</th>
        <th>column 2</th>
        <th>column 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <a href="https://stackoverflow.com/questions/77340782/hyperlink-text-in-cells">Displayed cell text 1</a>
        </td>
        <td>cell text 2</td>
        <td>cell text 3</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.