如何在JavaScript/ExtJS中获取表格选中行的数量及数据？

问题分析 #

你编写的代码存在几个关键问题：

• 循环条件错误：item.up('Table1').down('#grd2').getSelection()[0].data.length 取的是第一行数据对象的属性数量，并非选中行的总数
• 数组索引起始错误：从i=1开始遍历会漏掉索引为0的第一行选中数据
• 变量名不一致：定义的数组是list，push数据时却用了liste
• 重复调用getSelection()：每次循环都重新获取选中集合，既冗余又影响性能

正确实现方式（ExtJS场景） #

步骤1：先获取表格组件与选中行集合

先把选中行集合存入变量，避免重复调用组件查询方法：

// 获取目标表格组件
var grid = item.up('Table1').down('#grd2');
// 获取所有选中行，返回Ext.data.Model类型的数组
var selectedRows = grid.getSelection();

步骤2：获取选中行数量

直接利用数组的length属性即可：

var selectedCount = selectedRows.length;
console.log('选中行数：', selectedCount);

步骤3：获取所有选中行的完整数据

遍历选中行集合，通过data属性提取每行的完整数据：

var list = [];
// 用forEach遍历（推荐）
selectedRows.forEach(function(row) {
    list.push(row.data);
});

// 或者用普通for循环
// for(var i = 0; i < selectedRows.length; i++) {
//     list.push(selectedRows[i].data);
// }

console.log('所有选中行数据：', list);

完整可运行代码示例 #

var grid = item.up('Table1').down('#grd2');
var selectedRows = grid.getSelection();
var selectedCount = selectedRows.length;
var list = [];

selectedRows.forEach(function(row) {
    list.push(row.data);
});

console.log('选中行数：', selectedCount);
console.log('选中行数据列表：', list);

原生JavaScript场景（原生HTML表格） #

如果是原生HTML表格，可通过选中行的样式类或选择范围来处理：

// 假设选中行有`selected`样式类
var selectedRows = [];
document.querySelectorAll('table#grd2 tr.selected').forEach(function(tr) {
    var rowData = {};
    // 遍历单元格提取数据
    tr.querySelectorAll('td').forEach(function(td, index) {
        rowData['column' + (index + 1)] = td.textContent.trim();
    });
    selectedRows.push(rowData);
});

var selectedCount = selectedRows.length;
console.log('选中行数：', selectedCount);
console.log('选中行数据：', selectedRows);

内容的提问来源于stack exchange，提问作者user21256320