表格数量加减js

在JavaScript中，处理表格数量的加减通常涉及到DOM（Document Object Model）的操作，包括对表格行的添加（加）和删除（减）。以下是基础概念及相关操作：

基础概念

DOM操作：JavaScript可以通过DOM API来操作HTML文档的结构，包括添加、删除和修改元素。
事件监听：可以为按钮或其他元素添加事件监听器，以便在用户交互时执行特定的函数。

优势

动态性：允许网页内容动态变化，提高用户体验。
交互性：用户可以直接在网页上进行操作，无需刷新页面。

类型

行添加：在表格中添加新的行。
行删除：从表格中删除现有的行。

应用场景

数据管理界面：如用户管理、商品管理等需要动态增删数据的场景。
表单设计：允许用户根据需要添加或删除表单项。

示例代码

以下是一个简单的HTML和JavaScript示例，展示了如何实现表格行的加减功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格数量加减示例</title>
</head>
<body>

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

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

<script>
function addRow() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(-1); // 在表格末尾添加新行
  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(btn) {
  var row = btn.parentNode.parentNode; // 获取按钮所在的行
  row.parentNode.removeChild(row); // 删除该行
}
</script>

</body>
</html>