jquery如何判断table中tr是否被选中

发布时间：2021-12-01 12:39:33 作者：小新
来源：亿速云阅读：203

# jQuery如何判断table中tr是否被选中

## 前言

在Web开发中，表格（table）是展示结构化数据的常用组件。用户经常需要与表格行（tr）进行交互，比如选中某一行进行操作。本文将详细介绍如何使用jQuery判断表格中的行是否被选中，并提供多种实现方案和最佳实践。

---

## 一、基础实现方案

### 1. 通过CSS类名判断

最常见的做法是为选中的行添加特定类名（如`selected`），然后通过jQuery检测该类名是否存在：

```javascript
// 添加选中状态
$('table tr').click(function() {
  $(this).toggleClass('selected');
});

// 判断是否选中
function isRowSelected(row) {
  return $(row).hasClass('selected');
}

2. 通过属性标记

也可以使用data-*属性来标记选中状态：

// 切换选中状态
$('table tr').click(function() {
  $(this).attr('data-selected', !$(this).attr('data-selected'));
});

// 判断逻辑
function isRowSelected(row) {
  return $(row).attr('data-selected') === "true";
}

二、进阶实现方案

1. 配合复选框实现多选

当需要支持多选时，通常在每行开头添加复选框：

<table>
  <tr>
    <td><input type="checkbox" class="row-checkbox"></td>
    <td>数据1</td>
  </tr>
</table>

通过jQuery检测复选框状态：

// 判断单行
function isRowSelected(row) {
  return $(row).find('.row-checkbox').prop('checked');
}

// 获取所有选中行
$('#btn-submit').click(function() {
  var selectedRows = $('tr').has('.row-checkbox:checked');
});

2. 全选/反选功能实现

// 全选
$('#select-all').change(function() {
  $('.row-checkbox').prop('checked', this.checked);
});

// 统计选中行数
function getSelectedCount() {
  return $('.row-checkbox:checked').length;
}

三、性能优化建议

1. 事件委托优化

对于动态生成的表格，建议使用事件委托：

$(document).on('click', 'table tr', function() {
  // 处理逻辑
});

2. 缓存选择器

频繁操作DOM时缓存jQuery对象：

var $table = $('table');
function getSelectedRows() {
  return $table.find('tr.selected');
}

四、实际应用场景

场景1：批量删除操作

$('#btn-delete').click(function() {
  if ($('tr.selected').length === 0) {
    alert('请至少选择一行！');
    return;
  }
  // 执行删除逻辑
});

场景2：高亮显示选中行

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

五、完整代码示例

<table id="data-table">
  <tr><td><input type="checkbox"></td><td>Item 1</td></tr>
  <tr><td><input type="checkbox"></td><td>Item 2</td></tr>
</table>

<button id="check-selected">检查选中状态</button>

<script>
$(function() {
  // 行点击事件
  $('#data-table tr').click(function(e) {
    if (e.target.tagName !== 'INPUT') {
      $(this).find('input').prop('checked', function(i, val) {
        return !val;
      });
    }
  });

  // 检查按钮
  $('#check-selected').click(function() {
    $('#data-table tr').each(function() {
      if ($(this).find('input').is(':checked')) {
        console.log('选中行：', $(this).text());
      }
    });
  });
});
</script>

六、注意事项

事件冒泡问题：当tr内包含可点击元素（如按钮）时，需要阻止事件冒泡
移动端兼容性：触摸设备可能需要额外处理touch事件
无障碍访问：确保为选中状态提供ARIA属性支持

结语

本文介绍了多种判断表格行选中状态的方法，开发者可以根据具体需求选择最适合的方案。建议在复杂场景下优先考虑复选框方案，简单交互则可以使用类名标记方案。记得始终关注性能和用户体验优化。

作者注：本文示例基于jQuery 3.x版本，在低版本中可能需要调整部分API用法。 “`

（全文约1200字）