侧边栏壁纸
博主头像
云BLOG 博主等级

行动起来,活在当下

  • 累计撰写 318 篇文章
  • 累计创建 6 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录
WEB

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

Administrator
2024-05-14 / 0 评论 / 0 点赞 / 1 阅读 / 0 字

在使用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 中自己查看。

0

评论区