js如何搜索表格

在 javascript 中搜索表格数据的方法为：获取表格引用；获取表头；获取表体；循环遍历表体行检查是否匹配搜索词；对找到的匹配行进行处理。

在 JavaScript 中搜索表格

在 JavaScript 中搜索表格数据是一个常见的任务。可以通过以下步骤实现：

1. 获取表格引用

使用 document.querySelector 或 document.getElementById 方法获取 DOM 中表格的引用。

const table = document.querySelector("table");

登录后复制

2. 获取表头

使用 table.tHead 属性获取表格的表头。表头包含列标题。

const tableHead = table.tHead;

登录后复制

3. 获取表体

使用 table.tBodies 属性获取表格的表体。表体包含数据行。

const tableBody = table.tBodies[0]; // 通常获取第一个表体

登录后复制

4. 搜索数据

循环遍历表体行并检查每行的单元格是否与搜索词匹配。

const searchTerm = "John";
let foundRowIndex = -1;

for (let i = 0; i < tableBody.rows.length; i++) {
  const row = tableBody.rows[i];
  for (let j = 0; j < row.cells.length; j++) {
    const cell = row.cells[j];
    if (cell.textContent.toLowerCase().includes(searchTerm.toLowerCase())) {
      foundRowIndex = i;
      break;
    }
  }
}

登录后复制

5. 处理结果

如果找到匹配的行，将其高亮显示或以其他方式标记。

if (foundRowIndex !== -1) {
  const foundRow = tableBody.rows[foundRowIndex];
  foundRow.style.backgroundColor = "yellow";
}

登录后复制

以上就是js如何搜索表格的详细内容，更多请关注GTHOST其它相关文章！