js动态添加删除表格行

可以使用JavaScript动态添加和删除表格行，以下是一个简单的示例：

添加行：

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

// 创建一个新的行
var newRow = table.insertRow();

// 创建单元格并添加到新行
var cell1 = newRow.insertCell();
var cell2 = newRow.insertCell();
cell1.innerHTML = "内容1";
cell2.innerHTML = "内容2";

删除行：

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

// 删除最后一行
table.deleteRow(-1);

注意，这只是一个简单的示例，实际应用中需要根据具体需求进行修改。

相关问题

vue动态添加删除表格行

Vue.js 中动态添加和删除表格行通常通过 `v-for` 指令配合数组操作来实现。以下是一个简单的步骤：

1. **数据模型**：首先，你需要维护一个数组来存储表格的数据。比如，你可以创建一个名为 `items` 的 Vue实例数据属性。

data() {
  return {
    items: [
      { id: 0, name: 'Row 1' },
      { id: 1, name: 'Row 2' }
    ]
  };
}

2. **模板**：然后，在HTML模板中，使用 `v-for` 来渲染每一行，并提供添加和删除按钮。

<table>
  <tr v-for="item in items">
    <td>{{ item.name }}</td>
    <td><button @click="removeItem(item)">删除</button></td>
  </tr>
</table>

<!-- 添加行的按钮 -->
<button @click="addItem()">添加新行</button>

3. **方法**：定义 `addItem` 和 `removeItem` 方法来处理添加和删除操作。例如：

methods: {
  addItem() {
    this.items.push({ id: this.items.length, name: 'New Row' });
  },
  removeItem(item) {
    this.items = this.items.filter(i => i !== item);
  }
}

现在，每当你点击添加按钮，会往 `items` 数组中追加一行；点击删除按钮，则从数组中移除对应的项。

js动态添加删除表格内容

在JavaScript中，动态添加和删除表格内容是一个非常常见的需求，特别是在需要用户交互的网页应用中。以下是一个简单的示例，展示了如何使用JavaScript来动态添加和删除表格行。

首先，我们创建一个基本的HTML表格：

<table id="myTable" border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
</table>

<button onclick="addRow()">添加行</button>

接下来，我们编写JavaScript代码来实现动态添加和删除表格行的功能：

function addRow() {
    var table = document.getElementById("myTable");
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    
    cell1.innerHTML = "新姓名";
    cell2.innerHTML = "新年龄";
    cell3.innerHTML = "<button onclick='deleteRow(this)'>删除</button>";
}

function deleteRow(button) {
    var table = document.getElementById("myTable");
    var row = button.parentNode.parentNode;
    table.deleteRow(row.rowIndex);
}

在这个示例中，我们定义了一个`addRow`函数来添加新行，并定义了一个`deleteRow`函数来删除指定的行。`addRow`函数通过`insertRow`和`insertCell`方法动态地在表格中插入新行和新单元格。`deleteRow`函数通过获取按钮所在的行并调用`deleteRow`方法将其删除。