正文

掌握原生JS轻松实现表格行选中技巧，解锁高效数据处理新境界

/0 浏览量
0329

在网页开发中，表格是展示数据的一种常见方式。表格行选中功能可以让用户更直观地操作和查看数据。使用原生JavaScript，我们可以轻松实现表格行选中技巧，提高数据处理效率。本文将详细介绍如何使用原生JS实现表格行选中功能，并分享一些高级技巧。

1. 基础表格行选中

1.1 HTML结构

首先，我们需要一个简单的HTML表格结构：

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>程序员</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>设计师</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>产品经理</td>
    </tr>
  </tbody>
</table>

1.2 CSS样式

为了更好地展示选中效果，我们可以为选中行添加样式：

tr.selected {
  background-color: #f0f0f0;
}

1.3 JavaScript实现

接下来，我们使用原生JS实现表格行选中功能：

document.addEventListener('DOMContentLoaded', function() {
  var table = document.getElementById('myTable');
  var rows = table.getElementsByTagName('tr');

  for (var i = 0; i < rows.length; i++) {
    rows[i].addEventListener('click', function() {
      // 清除其他行的选中状态
      for (var j = 0; j < rows.length; j++) {
        rows[j].classList.remove('selected');
      }
      // 添加当前行的选中状态
      this.classList.add('selected');
    });
  }
});

2. 高级技巧

2.1 单选和复选

在某些场景下，我们需要实现单选或多选功能。这可以通过为每个行绑定不同的事件来实现：

for (var i = 0; i < rows.length; i++) {
  rows[i].addEventListener('click', function(event) {
    if (event.shiftKey) { // 复选
      // 处理复选逻辑
    } else { // 单选
      // 处理单选逻辑
    }
  });
}

2.2 动态添加行

在实际应用中，表格行可能会动态添加。我们可以通过监听DOMSubtreeModified事件来实现行选中功能：

table.addEventListener('DOMSubtreeModified', function() {
  // 重新绑定事件
  for (var i = 0; i < rows.length; i++) {
    rows[i].addEventListener('click', function() {
      // 清除其他行的选中状态
      for (var j = 0; j < rows.length; j++) {
        rows[j].classList.remove('selected');
      }
      // 添加当前行的选中状态
      this.classList.add('selected');
    });
  }
});

3. 总结

使用原生JavaScript实现表格行选中功能可以帮助我们更高效地处理数据。通过本文的学习，您应该掌握了基础表格行选中和一些高级技巧。在实际项目中，可以根据需求进行扩展和优化。希望这篇文章能对您有所帮助！

-- 展开阅读全文 --