Question

我有一个HTML表格，其创建方式如下：

<table id="tableID" onclick="getRowData()" class="table table-hover"></table>

首先，它会填充一些初始数据，这可能使其看起来像这样：

From  Action  To
 a      1     b
 a      0     a

我希望能够从任意行中检索数据，只需单击网页上的该行即可。我还希望能够从该行中检索行索引。例如，如果我想从第一行获取数据，那么我将得到a 1 b

这样的功能看起来如何？

Answer 1

您必须将点击处理程序放在行上，而不是在表上。

由于表是动态生成的，因此从Typescript / JavaScript附加点击处理程序可能会更容易，这是一种实现方法。

使用document.querySelector('#tableID')获取对表的引用。

然后，有两种方法可以获取对表行和单元格的引用：

使用table.querySelectorAll('tbody td')查询表DOM中的行。然后使用row.querySelectorAll('td')获取单元格。
使用表DOM API（请参见下面的@ H.B。注释）避免查询每一行和每个单元格的DOM。使用此技术，您可以使用table.tBodies[0].rows获取行，并使用row.cells获取单元格。

然后使用element.addEventListener('click', handler)将点击处理程序附加到每一行。

这是一个带有详细注释的JavaScript演示：

// get a reference to your table by id
// cast this to HTMLTableElement in TypeScript
const table = document.querySelector('#tableID');

// get all rows in the first table body
const rows = table.tBodies[0].rows;

// convert the rows to an array with the spread operator (...)
// then iterate over each row using forEach
Array.from(rows).forEach((row, idx) => {
  // attach a click handler on each row
  row.addEventListener('click', event => {
    // get all cells in the row, convert them to an array with the spread operator (...)
    // then for each cell, return its textContent by mapping on the array
    const tds = Array.from(row.cells).map(td => td.textContent);

    console.clear();
    // Log the row index
    console.log('row index:', idx);
    // Log the tds content array
    console.log('tds content:', ...tds);
    // join the contents of the tds with a space and display the string
    console.log('tds string:', tds.join(' '));
  });
});

<table id="tableID">
  <thead>
    <tr><th>From</th><th>Action</th><th>To</th></tr>
  </thead>
  <tbody>
    <tr><td>a</td><td>1</td><td>b</td></tr>
    <tr><td>a</td><td>0</td><td>a</td></tr>
  </tbody>
</table>

此外，在您的TypeScript代码中，请不要忘记将document.querySelector('#tableID')的结果强制转换为HTMLTableElement以获得正确的键入：

const table: HTMLTableElement = document.querySelector('#tableID');

See the TypeScript demo

在TypeScript中获取表行索引和行数据

1 个答案: