html删除表格行

要删除HTML表格中的行，可以使用JavaScript来实现。以下是一个简单的例子：

HTML代码:

<table id="myTable">
  <tr>
    <td>apple</td>
    <td>orange</td>
    <td>banana</td>
  </tr>
  <tr>
    <td>carrot</td>
    <td>celery</td>
    <td>tomato</td>
  </tr>
  <tr>
    <td>grape</td>
    <td>kiwi</td>
    <td>pineapple</td>
  </tr>
</table>

JavaScript代码:

var table = document.getElementById("myTable");
var rows = table.getElementsByTagName("tr");

// 删除第二行
table.deleteRow(1);

上面的代码将删除表格中的第二行。如果你想删除其他行，只需要修改参数即可。注意，删除行的索引是从0开始的。

相关问题

layui表格删除行

### 回答1：
要删除layui表格中的行，可以使用`table.reload()`方法重新加载数据，包括删除行后的数据。具体实现步骤如下：

1. 获取表格对象和表格数据。

var table = layui.table;
var data = [{
  id: 1,
  name: '张三',
  age: 18
}, {
  id: 2,
  name: '李四',
  age: 20
}];

2. 渲染表格。

table.render({
  elem: '#demo',
  cols: [[
    {field: 'id', title: 'ID'},
    {field: 'name', title: '姓名'},
    {field: 'age', title: '年龄'},
    {fixed: 'right', title: '操作', toolbar: '#barDemo'}
  ]],
  data: data
});

这里在表格的最后一列添加了一个操作栏，用于删除行。

3. 监听操作栏中的删除按钮。

// 监听表格中的工具条
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. 删除指定行。

// 删除指定行
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方法进行删除操作。

首先，在表格中设置一个删除按钮，绑定点击事件，并传递要删除的行的索引作为参数：

<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函数来处理删除行的逻辑：

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表格删除行了。需要注意的是，删除行的操作是基于实例对象进行的，所以要确保在操作前已经成功获取到表格实例对象。

js删除html表格

你可以使用 JavaScript 中的 removeChild() 方法来删除 HTML 表格。以下是一个简单的示例代码：

<table id="myTable">
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

<button onclick="deleteTable()">删除表格</button>

<script>
function deleteTable() {
  var table = document.getElementById("myTable");
  table.parentNode.removeChild(table);
}
</script>

在这个例子中，我们首先定义了一个带有 `id` 属性为 `myTable` 的表格，并在页面上显示了一个按钮。当用户点击按钮时，`deleteTable()` 函数将被调用。该函数使用 `getElementById()` 方法获取表格元素，并使用 `removeChild()` 方法从其父元素中删除该元素，从而删除整个表格。

注意，这只是一个简单的示例，你可以根据自己的需求进行修改。