js 如何批量删除table中的数据

你可以使用 JavaScript 来批量删除表格中的数据。以下是一个示例代码：

// 获取表格对象
var table = document.getElementById("yourTableId");

// 获取表格的行数
var rowCount = table.rows.length;

// 从最后一行开始循环删除数据
for (var i = rowCount - 1; i > 0; i--) {
  table.deleteRow(i);
}

在上面的代码中，你需要将 `"yourTableId"` 替换为你实际的表格的 ID。该代码首先通过 `getElementById` 方法获取到指定 ID 的表格对象。然后使用 `rows.length` 属性获取到表格的行数。接下来使用一个循环，从最后一行开始逐行删除数据，使用 `deleteRow` 方法来删除指定行。

请确保在使用该代码之前，你的 HTML 页面中已经正确定义了一个带有正确 ID 的表格。

相关问题

js el-table 批量删除

可以使用以下代码实现批量删除：

// 获取选中的行
const selection = this.$refs.table.selection;

// 获取选中行的 id
const ids = selection.map(item => item.id);

// 发送删除请求
this.$http.delete('/api/delete', { data: { ids }})
  .then(() => {
    // 删除成功后，重新加载数据
    this.loadData();
  })
  .catch(error => {
    console.error(error);
  });

其中，`this.$refs.table` 是 `el-table` 组件的引用，`selection` 属性表示当前选中的行。

layui table 批量删除

layui table 是一款基于layui框架开发的表格插件，它提供了很多实用的功能，包括批量删除。具体实现方法如下：

1. 在HTML页面中，定义一个表格，并且给表格添加一个id，如下所示：

<table id="demo" lay-filter="test"></table>

2. 在JS文件中，通过 layui.table.render() 方法渲染表格，并且设置一些属性，如下所示：

layui.use('table', function(){
  var table = layui.table;
  
  //渲染表格
  table.render({
    elem: '#demo',
    url: '/demo/table/user/', //数据接口
    page: true, //开启分页
    cols: [[ //表头
      {type: 'checkbox'},
      {field: 'id', title: 'ID', width:80, sort: true},
      {field: 'username', title: '用户名', width:120},
      {field: 'email', title: '邮箱', width:150},
      {field: 'sex', title: '性别', width:80, sort: true},
      {field: 'city', title: '城市', width:100},
      {field: 'sign', title: '签名', width: 200},
      {field: 'experience', title: '积分', width: 80, sort: true},
      {field: 'score', title: '评分', width: 80, sort: true},
      {field: 'classify', title: '职业', width: 100},
      {field: 'wealth', title: '财富', width: 135, sort: true},
      {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]]
  });
});

3. 定义一个工具条模板，通过 checkbox 来选择需要删除的数据项，如下所示：

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

4. 绑定工具条事件，通过 layui.table.on() 方法监听事件，如下所示：

layui.use('table', function(){
  var table = layui.table;
  
  //监听工具条
  table.on('tool(test)', function(obj){
    var data = obj.data; //获取当前行数据
    var layEvent = obj.event; //获取lay-event对应的值
    
    if(layEvent === 'del'){ //删除
      layer.confirm('真的删除行么', function(index){
        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
        layer.close(index);
        //向服务端发送删除指令
      });
    } 
  });
});

5. 定义一个批量删除按钮，通过 layui.table.on() 方法监听按钮事件，并获取选中的数据项进行删除操作，如下所示：

layui.use('table', function(){
  var table = layui.table;
  
  //监听表格复选框选择
  table.on('checkbox(test)', function(obj){
    console.log(obj)
  });
  
  //监听工具条
  table.on('tool(test)', function(obj){
    var data = obj.data; //获取当前行数据
    var layEvent = obj.event; //获取lay-event对应的值
    
    if(layEvent === 'del'){ //删除
      layer.confirm('真的删除行么', function(index){
        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
        layer.close(index);
        //向服务端发送删除指令
      });
    } 
  });
  
  //批量删除按钮事件监听
  $('#btnDelete').click(function(){
    var checkStatus = table.checkStatus('demo'); //获取选中行数据
    var data = checkStatus.data;
    if(data.length > 0){
      layer.confirm('真的删除选中的数据么？', function(index){
        $.ajax({
          url : '/demo/table/delete/',
          type : "POST",
          data : {
            data : JSON.stringify(data)
          },
          success : function(data) {
            if (data.code == 0) {
              layer.msg("删除成功", {
                icon : 6,
                time : 1000
              }, function() {
                table.reload("demo");
              });
            } else {
              layer.msg(data.msg, {
                icon : 5,
                time : 1000
              });
            }
          }
        });
        layer.close(index);
      });
    }else{
      layer.msg("请选择需要删除的数据");
    }
  });
});

以上就是 layui table 批量删除的实现方法。如果您还有其他问题，请随时提出。