Layui表格怎么获取渲染后的DOM对象-Layui教程-PHP中文网

Layui table.render 后 DOM 未立即生成，须在 done 回调或 table.on('rendered') 事件中操作；done 最稳妥，可查 document.querySelector('#id table') 获取完整 DOM。

layui.table.render 之后 DOM 还没生成？

不是渲染失败，是 table.render() 默认异步加载数据并插入 dom，调用完立刻查 document.getelementbyid('id') 或 $('table') 会找不到——因为表格体（<tbody>）和行元素还没塞进去。 <p>正确时机只在两个地方：一是 <code>done 回调里，二是监听 table.on('rendered') 事件（Layui 2.8+ 支持）。

done 是最稳妥的选择，它保证数据已渲染、DOM 已挂载、分页栏也已就绪
如果要在表格重载后（比如 table.reload()）再操作 DOM，同样得进 done，不能靠 setTimeout 硬等
别在 init 或 success（旧版写法）里找 DOM，这些钩子不等于渲染完成

怎么在 done 里拿到完整的 table DOM 节点？

done 回调传三个参数：res（原始数据）、curr（当前页码）、count（总条数），但它**不直接给 DOM 引用**。你需要自己定位：

用配置项里的 elem 值查：比如 elem: '#test'，就用 document.querySelector('#test')
更可靠的是通过 id 找到容器，再向下找 <table> 标签：<code>document.querySelector('#test table')
如果要取所有行（<tr>），必须等 <code>done 里执行：document.querySelectorAll('#test tbody tr')，否则长度为 0
示例：
```
table.render({
  elem: '#test',
  url: '/api/list',
  done: function(res, curr, count) {
    const tableEl = document.querySelector('#test table');
    const rows = tableEl.querySelectorAll('tbody tr');
    console.log('共渲染', rows.length, '行');
  }
});
```
用 jQuery 操作时容易漏掉什么？

Layui 表格本身不依赖 jQuery，但很多人混用，结果发现 $('#test tbody tr') 在 done 外为空、在 done 内也取不到——大概率是 jQuery 版本或加载顺序问题。

深蓝色网站后台管理系统layui框架模板-AdminPro
一款深蓝色网站后台管理系统layui框架模板

下载
- 确保 jQuery 在 Layui 之前加载，且不是 slim 版（缺少 .on() 等方法）
- 别用 $('#test').find('tbody tr') 这种链式写法去“预查”，DOM 还没出来就查，永远空
- 如果用了 skin: 'line' 或自定义 cols，表格结构可能多一层 <div class="layui-table-box">，此时 <code>$('#test tbody') 可能失效，得用 $('#test .layui-table tbody')
  监听 rendered 事件比 done 更灵活吗？
  
  从 Layui 2.8 开始，table.on('rendered(filter)', callback) 确实能捕获每次渲染完成（包括 reload），但它**不传 DOM 节点，也不传数据**，纯通知作用。
  - 适合做 UI 后处理，比如给某列加 tooltip、绑定 click 事件，但你要自己再查 DOM
  - 和 done 不互斥，可以同时用：done 处理数据逻辑，rendered 处理 DOM 增强
  - 注意 filter 必须和 render 时的 id 一致，比如 render 里写了 id: 'userTable'，那监听就得写 table.on('rendered(userTable)', ...)
  这个事件本质只是个信号，真要拿 DOM，还是得回到上一步的老办法。
  
  真正卡住人的，往往不是语法，而是以为“render 调用完 DOM 就有了”——其实它只发了个请求，后面全是异步塞进去的。盯住 done，其他都是绕路。