前端 表格中某一行数据的一个字段的值显示根据另一个字段的修改
时间: 2024-03-26 09:40:17 浏览: 125
如果需要在表格中动态更新某一行数据的某个字段的值,可以使用表格库的事件监听机制,监听单元格数据的修改事件,然后根据需要修改相关行数据的值。
以使用 layui 的 table 模块为例,可以使用 `table.on('edit')` 监听表格单元格的编辑事件,然后在事件回调函数中修改需要修改的行数据的值。
示例代码如下:
```html
<table id="demo" lay-filter="test"></table>
```
```javascript
layui.use('table', function() {
var table = layui.table;
// 渲染表格
table.render({
elem: '#demo',
url: '/demo/table/data',
cols: [[
{field: 'id', title: 'ID', width: 80},
{field: 'name', title: '姓名', width: 120},
{field: 'age', title: '年龄', width: 80},
{field: 'sex', title: '性别', width: 80},
{field: 'score', title: '分数', width: 80, edit: 'text'},
{field: 'grade', title: '年级', width: 80}
]],
page: true
});
// 监听单元格编辑事件
table.on('edit(test)', function(obj){
var value = obj.value; // 修改后的值
var data = obj.data; // 当前行的数据
var field = obj.field; // 当前编辑的字段
if (field === 'score') {
// 如果修改的是分数,根据分数修改年级
var grade = value < 60 ? '不及格' : '及格';
// 修改对应行数据的值
data.grade = grade;
// 重新渲染表格
table.render({
elem: '#demo',
data: table.cache.demo
});
}
});
});
```
上面的代码中,我们在分数这一列添加了编辑功能,当分数被修改后,会触发 `table.on('edit')` 事件回调函数,根据分数的值计算出年级,并修改对应行数据的值,然后重新渲染表格。
需要注意的是,不同的表格库可能有不同的事件监听机制,具体可以参考相应的文档。
阅读全文