layui表格为tr指定id
时间: 2024-05-10 22:15:34 浏览: 14
要为 layui 表格中的 tr 指定 id,可以通过在渲染表格的时候设置 templet 模板来实现。
具体步骤如下:
1. 在 table 中添加 templet 属性,并设置一个函数,用来渲染表格中的每一行数据。
```javascript
<table id="demo" lay-filter="test">
<thead>
<tr>
<th lay-data="{field:'id', width:80}">ID</th>
<th lay-data="{field:'username', width:80}">用户名</th>
<th lay-data="{field:'email', width:150}">邮箱</th>
<th lay-data="{field:'sex', width:80, sort:true}">性别</th>
<th lay-data="{field:'city', width:100}">城市</th>
<th lay-data="{field:'sign', width:150}">签名</th>
<th lay-data="{field:'experience', width:80, sort:true}">积分</th>
<th lay-data="{field:'score', width:80, sort:true}">评分</th>
<th lay-data="{field:'classify', width:80}">职业</th>
<th lay-data="{field:'wealth', width:135, sort:true}">财富</th>
</tr>
</thead>
<tbody id="tbody-demo">
</tbody>
</table>
<script type="text/html" id="tpl">
<tr id="{{d.id}}">
<td>{{d.id}}</td>
<td>{{d.username}}</td>
<td>{{d.email}}</td>
<td>{{d.sex}}</td>
<td>{{d.city}}</td>
<td>{{d.sign}}</td>
<td>{{d.experience}}</td>
<td>{{d.score}}</td>
<td>{{d.classify}}</td>
<td>{{d.wealth}}</td>
</tr>
</script>
```
2. 在 JavaScript 中,使用 layui 的 table 模块,设置 templet 属性,指向刚才定义的模板。
```javascript
layui.use('table', function(){
var table = layui.table;
//渲染表格
table.render({
elem: '#demo',
url: '/demo/table/user/',
templet: '#tpl', //指定模板
cols: [[
{field:'id', width:80, title: 'ID'},
{field:'username', width:80, title: '用户名'},
{field:'email', width:150, title: '邮箱'},
{field:'sex', width:80, title: '性别'},
{field:'city', width:100, title: '城市'},
{field:'sign', width:150, title: '签名'},
{field:'experience', width:80, title: '积分'},
{field:'score', width:80, title: '评分'},
{field:'classify', width:80, title: '职业'},
{field:'wealth', width:135, title: '财富'}
]]
});
});
```
通过上述代码,即可为 layui 表格中的每一行 tr 指定一个 id。在模板中,使用 `{{d.id}}` 就可以获取到每一行数据的 id 值,并将其作为 tr 的 id 属性的值。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)