点击删除删除layui表格的这行数据

### 回答1： 要删除layui表格中的行，可以使用`table.reload()`方法重新加载数据，包括删除行后的数据。具体实现步骤如下： 1. 获取表格对象和表格数据。 ```javascript var table = layui.table; var data = [{ id: 1, name: '张三', age: 18 }, { id: 2, name: '李四', age: 20 }]; ``` 2. 渲染表格。 ```javascript table.render({ elem: '#demo', cols: [[ {field: 'id', title: 'ID'}, {field: 'name', title: '姓名'}, {field: 'age', title: '年龄'}, {fixed: 'right', title: '操作', toolbar: '#barDemo'} ]], data: data }); ``` 这里在表格的最后一列添加了一个操作栏，用于删除行。 3. 监听操作栏中的删除按钮。 ```javascript // 监听表格中的工具条 table.on('tool(demo)', function(obj){ var data = obj.data; if(obj.event === 'del'){ layer.confirm('真的删除行么？', function(index){ // 删除行 var newData = []; for(var i=0;i<data.length;i++){ if(data[i].id != obj.data.id){ newData.push(data[i]); } } table.reload('demo', {data: newData}); layer.close(index); }); } }); ``` 这里通过监听表格中的工具条，判断点击的是删除按钮，然后弹出确认框，确认后删除行。 4. 删除指定行。 ```javascript // 删除指定行 var newData = []; for(var i=0;i<data.length;i++){ if(data[i].id != 1){ newData.push(data[i]); } } table.reload('demo', {data: newData}); ``` 这里删除id为1的行，可以根据需求修改。 ### 回答2： 在layui表格中删除行，需要先获取到要删除的行的索引，然后使用layui表格的API方法进行删除操作。 首先，在表格中设置一个删除按钮，绑定点击事件，并传递要删除的行的索引作为参数： ```html <table id="test"> <!-- 表格内容省略 --> <tbody> <tr> <td>1</td> <td>John</td> <td><button class="layui-btn layui-btn-danger" onclick="deleteRow(0)">删除</button></td> </tr> <tr> <td>2</td> <td>Mike</td> <td><button class="layui-btn layui-btn-danger" onclick="deleteRow(1)">删除</button></td> </tr> <!-- 更多行省略 --> </tbody> </table> ``` 然后，在JavaScript中定义一个deleteRow函数来处理删除行的逻辑： ```javascript function deleteRow(index) { layui.use('table', function(){ var table = layui.table; // 获取表格对象 var tableIns = table.render({ elem: '#test' }); // 获取当前数据表格的所有数据 var data = tableIns.config.data; // 删除指定索引的行数据 data.splice(index, 1); // 更新数据表格 tableIns.reload({ data: data }); }); } ``` 在函数中，首先获取到表格对象tableIns，然后通过config.data属性获取到当前表格中的所有数据，并使用splice方法删除指定索引的行数据。最后，调用reload方法重新加载数据，传递更新后的数据给data参数。 这样，当点击删除按钮时，对应的行数据将会被从表格中删除。 ### 回答3： 在Layui表格中删除行的操作是比较简单的。下面我就具体的步骤进行介绍。 首先，我们需要先获得表格实例对象，可以通过Layui提供的 table.render() 方法来实现。这个方法的参数一般是一个对象，包含了一些配置和回调函数。 在获取到表格实例对象后，我们可以使用实例对象的方法 table.on(event, callback) 来实现行的删除操作。其中，event 是事件类型，我们可以使用 "row(multiple)" 来实现行的多选删除，也可以使用 "row(single)" 来实现行的单选删除，callback 是回调函数，表示执行删除操作后的处理逻辑。 接下来，我们在回调函数中实现删除的具体逻辑。使用 table.checkStatus(id) 方法获取当前选中的行数据，返回的是一个对象，其中 data 属性包含了当前选中的行数据。然后，我们可以遍历选中的数据，获取到行对应的索引值，再通过实例对象的方法 table.trDel(index) 来删除行。 最后，为了使删除操作生效，我们还需要引入一些必要的样式和库文件，如 layui.css、layui.js 等。 这样，我们就可以使用Layui表格删除行了。需要注意的是，删除行的操作是基于实例对象进行的，所以要确保在操作前已经成功获取到表格实例对象。

您可以在 layui 表格中使用表格渲染完成后，给每一行添加一个删除按钮，然后通过按钮的点击事件来删除对应的行。具体实现方法如下： 1. 在表格渲染的时候给每一行添加一个删除按钮，可以使用 laytpl 模板引擎进行渲染，代码如下： ```javascript table.render({ elem: '#test', url: '/demo/table/user/', cols: [[ {field:'id', title:'ID', width:80}, {field:'username', title:'用户名', width:120}, {field:'email', title:'邮箱', width:150}, {field:'operate', title:'操作', toolbar:'#barDemo', width:120} ]], page: true }); // 操作栏渲染 table.on('tool(test)', function(obj){ var data = obj.data; if(obj.event === 'del'){ layer.confirm('确定删除该行数据吗？', function(index){ obj.del(); //删除对应行（tr）的DOM结构，并更新缓存 layer.close(index); //TODO 发送删除请求 }); } }); // 操作栏模板 <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> ``` 2. 接着，在按钮的点击事件中实现删除操作，代码如下： ```javascript table.on('tool(test)', function(obj){ var data = obj.data; if(obj.event === 'del'){ layer.confirm('确定删除该行数据吗？', function(index){ obj.del(); //删除对应行（tr）的DOM结构，并更新缓存 layer.close(index); // 发送删除请求 $.ajax({ url: '/api/delete', type: 'post', data: {id: data.id}, success: function(res){ if(res.code === 0){ layer.msg('删除成功'); } else { layer.msg('删除失败'); } }, error: function(){ layer.msg('删除失败'); } }); }); } }); ``` 在这个例子中，我们使用了 layer 弹窗和 layui 的表格组件实现了点击删除行的功能。当用户点击删除按钮时，弹出确认框询问用户是否确定删除，如果用户确定，则通过 AJAX 请求将该行数据从后端数据库中删除，并在删除完成后更新表格中的数据。