正文

掌握JS获取选中行值的实用技巧

/0 浏览量
0411

在处理表格数据时，我们常常需要获取用户选中的行值。JavaScript 提供了多种方法来实现这一功能，以下是一些实用的技巧，帮助你轻松获取选中行的值。

1. 使用 getSelectedRow() 函数

这是一个简单而直接的方法，通过遍历表格的每一行来查找选中的行。

function getSelectedRow() {
  var table = document.getElementById('myTable');
  var rows = table.getElementsByTagName('tr');
  for (var i = 0; i < rows.length; i++) {
    if (rows[i].className === 'selected') {
      return rows[i];
    }
  }
  return null;
}

// 使用示例
var selectedRow = getSelectedRow();
if (selectedRow) {
  console.log('Selected row index: ' + selectedRow.rowIndex);
}

2. 使用 querySelector() 方法

如果你知道选中的行有一个特定的类名或ID，可以使用 querySelector() 方法来直接获取它。

var selectedRow = document.querySelector('.selected');
if (selectedRow) {
  console.log('Selected row index: ' + selectedRow.rowIndex);
}

3. 监听行点击事件

你可以为表格的每一行添加点击事件监听器，当行被点击时，更新一个变量来存储当前选中的行。

var selectedRow = null;

document.getElementById('myTable').addEventListener('click', function(event) {
  if (event.target.tagName === 'TR') {
    if (selectedRow) {
      selectedRow.classList.remove('selected');
    }
    selectedRow = event.target;
    selectedRow.classList.add('selected');
  }
});

// 使用示例
if (selectedRow) {
  console.log('Selected row index: ' + selectedRow.rowIndex);
}

4. 使用 getElementsByClassName() 和 getElementsByTagName() 方法

如果你想要获取所有选中的行，可以使用 getElementsByClassName() 或 getElementsByTagName() 方法。

var selectedRows = document.getElementsByClassName('selected');
for (var i = 0; i < selectedRows.length; i++) {
  console.log('Selected row index: ' + selectedRows[i].rowIndex);
}

5. 使用表格的 rows 属性

表格对象有一个 rows 属性，它包含了表格中的所有行。你可以遍历这个数组来找到选中的行。

var table = document.getElementById('myTable');
var rows = table.rows;
for (var i = 0; i < rows.length; i++) {
  if (rows[i].className === 'selected') {
    console.log('Selected row index: ' + rows[i].rowIndex);
    break;
  }
}

总结

以上是几种获取选中行值的实用技巧。根据你的具体需求，你可以选择最适合你的方法。希望这些技巧能帮助你更高效地处理表格数据。

-- 展开阅读全文 --