layui table定位table、表头、某一行、某一列等方法汇总

分享 未结 精帖 3 1090
CrazyYi
CrazyYi 2020-2-16
悬赏:20飞吻
在使用layui table中,经常会遇到,需要定位某一行、某一列的单元格,或者定位某一行等等操作。
layui table 提供的 行事件等等不太够用。

我就结合 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 中自己查看。
回帖
  • joycewu
    2020-2-22
    感谢分享,谢谢楼主,很实用
    1 回复
  • CrazyYi
    2020-2-16
    自己给自己先顶一下,哈
    0 回复
  • 收藏了,感谢分享!
    顺便拿分,谢谢!
    0 回复