在使用layui table中，经常会遇到，需要定位某一行、某一列的单元格，或者定位某一行等等操作。-云BLOG

在使用layui table中，经常会遇到，需要定位某一行、某一列的单元格，或者定位某一行等等操作。
layui table 提供的行事件等等不太够用。

监听行的点击事件

table.on('row(table1)', function (obj) {
   var rowIndex =  $(obj.tr).attr("data-index");

});

//监听行的点击事件
table.on('row(tableFilter)', function (obj) {
   //获取当前行的索引
   var rowIndex = $(obj.tr).attr("data-index");
   
   //更新指定行某字段显示值
   $(".layui-table-box tbody tr[data-index='" + rowIndex + "'] td[data-field='yourField']").text("yourValue");
 
   //同步更新缓存对应的值（真正的更新）
   obj.update({
       yourField: yourValue
   });
 
});
 
//监听单元格编辑
table.on('edit(tableFilter)', function (obj) {
   //获取当前行的索引
   var rowIndex = $(obj.tr).attr("data-index");
 
     //更新指定行某字段显示值
   $(".layui-table-box tbody tr[data-index='" + rowIndex + "'] td[data-field='yourField']").text("yourValue");
 
   //同步更新缓存对应的值（真正的更新）
   obj.update({
       yourField: yourValue
   });
});
————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
                        
原文链接：https://blog.csdn.net/qq_25231683/article/details/124295800

如果你想要获取某一行数据在表格中的下标（即行号），可以使用 table 模块的 getData 方法获取所有行数据，然后遍历数组，在遍历的过程中查找目标行数据，并返回该行数据的下标。

例如：

var data = table.cache['test']; // 获取表格数据
var targetId = '123'; // 假设你需要获取 ID 为 123 的行的下标
var index = -1; // 初始化下标为 -1
for(var i = 0; i < data.length; i++){
  if(data[i].id === targetId){ // 如果找到[目标](https://geek.csdn.net/educolumn/06c7a9ffb1969a0ad080048a16f82c4e?spm=1055.2569.3001.10083)行数据
    index = i; // 保存该行数据的下标
    break;
  }
}
if(index !== -1){
  console.log(index); // 输出该行数据的下标
}
其中，test 为你的 table ID。

注意，这里的 targetId 必须是一个字符串，因为从表格中获取的数据都是字符串类型。如果你需要比较数字类型的数据，可以使用 parseInt 或者 parseFloat 方法将字符串转换为数字类型。

相关问题
layui 监控table row 获取该行数据的下标
如果你想要获取某一行数据在表格中的下标（即行号），可以使用 table 模块的 getData 方法获取所有行数据，然后遍历数组，在遍历的过程中查找目标行数据，并返回该行数据的下标。

例如：

var data = table.cache['test']; // 获取表格数据
var targetData = {id: 123}; // 假设你需要获取 ID 为 123 的行的下标
var index = -1; // 初始化下标为 -1
for(var i = 0; i < data.length; i++){
  if(JSON.stringify(data[i]) === JSON.stringify(targetData)){ // 如果找到目标行数据
    index = i; // 保存该行数据的下标
    break;
  }
}
if(index !== -1){
  console.log(index); // 输出该行数据的下标
}
其中，test 为你的 table ID。这里使用 JSON.stringify 方法来比较两个对象是否相等，因为对象之间不能直接使用 == 或者 === 来比较。

layui 监控table row 获取行
如果你需要在 layui 的 table 组件中获取某一行的数据，可以使用 table 模块的 getCheckStatus 和 getData 方法来实现。

getCheckStatus 方法
该方法可以获取表格中选中的行数据。如果你不需要选中行，可以在每一行前面加上一个 checkbox，然后监听 checkbox 的选中事件（即 onCheckbox），在选中事件中通过 getCheckStatus 获取选中的行数据。

例如：

// 监听复选框选中事件
table.on('checkbox(test)', function(obj){
  var checkStatus = table.checkStatus('test'); // 获取选中行数据
  console.log(checkStatus.data); // 输出选中行数据
});
其中，test 为你的 table ID。

getData 方法
该方法可以获取表格中所有行的数据。如果你需要获取某一行的数据，可以通过遍历整个数据数组并根据某一行的数据特征来获取该行的数据。

例如：

var data = table.cache['test']; // 获取表格数据
for(var i = 0; i < data.length; i++){
  if(data[i].id === 123){ // 假设你需要获取 ID 为 123 的行数据
    console.log(data[i]); // 输出 ID 为 123 的行数据
    break;
  }
}
其中，test 为你的 table ID。

注意，getData 方法返回的是一个数组，数组中的每个元素都是一个包含所有列数据的对象。如果你需要获取某一列的数据，可以通过对象的属性名来获取。例如，如果你想要获取第一列的数据，可以通过 data[i].field1 来获取。

我就结合 jQuery ，汇总了如下的方法，供大家参考：

如下方法，我也汇总了一个第三方js， crazyTableQuery下载

我列出几个代码。
假设你的layui table 的id = 'demo'

1、获取当前渲染出来的table

    $('#demo').next().find('.layui-table-box')

2、获取表头

    $('#demo').next().find('.layui-table-header')

3、获取当前渲染出来的table的body部分

    $('#demo').next().find('.layui-table-box').find('.layui-table-main')
    $('#demo').next().find('.layui-table-main')  // 这样写也可以，layui-table-main 只有1个
    $('#demo').next().find('.layui-table-main').find('table')  // 这样写也可以

    // 不能直接定位 layui-table-body，因为可能存在两个（一个在box下面，一个在fixed下面-固定列）
    $('#demo').next().find('.layui-table-body')

4、获取当前渲染出来的table的头工具栏toolbar

    $('#demo').next().find('.layui-table-tool')

5、获取table中所有的tr

    $('#demo').next().find('.layui-table-main').find('tr')  // 这样获取的是一个数组，里面包含所有的tr

6、获取table中第3行的tr

    // 方法1：直接定位data-index
    $('#demo').next().find('.layui-table-main').find('tr[data-index="3"]')  

    // 方法2：从数组中获取
    $('#demo').next().find('.layui-table-main').find('tr').eq(3)

7、获取第3行、field=‘xxxxx’ 的单元格（假设有一个字段是 xxxxx）

    // 直接定位
    $('#demo').next().find('.layui-table-main').find('tr[data-index="3"]').find('td[data-field="xxxxx"]')

其他的方法，可以到js 中自己查看。

目录CONTENT

在使用layui table中，经常会遇到，需要定位某一行、某一列的单元格，或者定位某一行等等操作。

评论区