js实现动态添加、删除行、onkeyup表格求和示例

下面是关于js实现动态添加、删除行、onkeyup表格求和的完整攻略。

1. 理解需求及思路

首先需要明确的是，我们要实现的功能主要有三个：动态添加行、动态删除行以及表格数据的求和。基于这些需求，我们可以制定以下的实现思路：

1. 定义一个数组，用于存储表格数据；
2. 使用DOM操作创建表格，并将表格数据导入数组；
3. 为添加按钮绑定事件，以动态添加表格行；
4. 为删除按钮绑定事件，以动态删除表格行；
5. 使用循环遍历数组，对表格数据进行求和，并显示在表格底部。

2. 实现步骤

2.1 创建HTML页面

在HTML页面上创建表格，并设置表格头部和底部。同时，在页面上创建两个按钮，分别用于添加和删除表格行。

<table>
  <thead>
    <tr>
      <th>商品名称</th>
      <th>单价</th>
      <th>数量</th>
      <th>小计</th>
    </tr>
  </thead>
  <tbody id="table-body">
    <!--表格数据将动态添加在这里-->
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3" align="right">总计：</td>
      <td id="total-amount">0</td>
    </tr>
  </tfoot>
</table>
<button id="add-row-btn">添加行</button>
<button id="delete-row-btn">删除行</button>

2.2 使用DOM操作创建表格行

定义一个数组 data 用于存储表格数据，并通过Js动态创建表格行，将表格数据导入数组。当添加按钮被点击时，会触发 addRow 函数，在函数中使用 createElement 方法以及 appendChild 方法动态添加新的一行。

const data = [];

function addRow() {
  const tbody = document.getElementById('table-body');
  const row = document.createElement('tr');

  const name = document.createElement('td');
  name.innerText = '商品名称';
  row.appendChild(name);

  const price = document.createElement('td');
  price.innerText = '0';
  row.appendChild(price);

  const count = document.createElement('td');
  const countInput = document.createElement('input');
  countInput.type = 'number';
  countInput.value = '0';
  countInput.onkeyup = function() {
    // 数量发生变化时，重新计算小计和总计
    const subtotal = price.innerText * this.value;
    const index = Array.from(tbody.children).indexOf(row);
    data[index].subtotal = subtotal;
    showTotalAmount();

    // 更新当前行的小计
    subtotalTd.innerText = subtotal;
  };
  count.appendChild(countInput);
  row.appendChild(count);

  const subtotalTd = document.createElement('td');
  subtotalTd.innerText = '0';
  row.appendChild(subtotalTd);

  tbody.appendChild(row);

  // 将当前行的数据存入数组
  data.push({
    price: 0,
    count: 0,
    subtotal: 0
  });
}

2.3 实现删除表格行功能

当删除按钮被点击时，会触发 deleteRow 函数，在函数中使用 removeChild 方法将选中的行从表格中删除。同时移除数组 data 中对应的元素。

function deleteRow() {
  const tbody = document.getElementById('table-body');
  const rows = tbody.children;

  for (let i = 0; i < rows.length; i++) {
    const checkbox = rows[i].querySelector('input[type="checkbox"]');
    if (checkbox.checked) {
      tbody.removeChild(rows[i]);
      data.splice(i, 1);
      i--;
    }
  }

  showTotalAmount();
}

2.4 实现表格的求和功能

通过 showTotalAmount 函数，我们将使用循环遍历数组中的数据并计算其总和，然后将总和显示在页面上。除此之外，我们还需要在 addRow 和 deleteRow 函数中调用 showTotalAmount 方法来更新表格的总计。

function showTotalAmount() {
  const tbody = document.getElementById('table-body');
  const rows = tbody.children;
  let total = 0;

  for (let i = 0; i < rows.length; i++) {
    const price = parseFloat(rows[i].children[1].innerText);
    const count = parseFloat(rows[i].children[2].children[0].value);
    const subtotal = price * count;

    total += subtotal;
  }

  const totalAmount = document.getElementById('total-amount');
  totalAmount.innerText = total;
}

3. 示例说明

3.1 动态添加、删除行

在实现行删除的过程中，我们通过遍历选中的行，并从表格和数组中移除它们来实现删除的功能。代码示例中，我们使用到了 querySelector 方法来获取行中的 checkbox 元素，从而判断哪些行被选中了。

for (let i = 0; i < rows.length; i++) {
  const checkbox = rows[i].querySelector('input[type="checkbox"]');
  if (checkbox.checked) {
    tbody.removeChild(rows[i]);
    data.splice(i, 1);
    i--;
  }
}

3.2 表格求和

在实现表格求和的过程中，我们通过循环遍历表格中的数据，并对每行的小计进行求和，得到表格的总和。代码示例中，我们使用到了 querySelector 方法来获取表格中的底部元素，并将求和结果更新到其中。

function showTotalAmount() {
  const tbody = document.getElementById('table-body');
  const rows = tbody.children;
  let total = 0;

  for (let i = 0; i < rows.length; i++) {
    const price = parseFloat(rows[i].children[1].innerText);
    const count = parseFloat(rows[i].children[2].children[0].value);
    const subtotal = price * count;

    total += subtotal;
  }

  const totalAmount = document.getElementById('total-amount');
  totalAmount.innerText = total;
}

以上就是js实现动态添加、删除行、onkeyup表格求和的完整攻略。