html表格列值的总和（动态）答案

【问题标题】：Total sum of html table column values(dynamic)html表格列值的总和（动态）
【发布时间】：2021-08-27 13:35:59
【问题描述】：

每当总列中任何单元格的值发生更改时，我都想要总列的总和。当我点击任何“add”按钮时，我实际上在做什么，它会被隐藏，而其他“remove”按钮会被显示，相应的输入也会被启用，如果我在输入中输入一些值，然后它会更新下一个单元格中的值此列中的内容发生更改，然后更新“sum”。

function updatevalue(item, value, data) {
  var td = item.parentNode.nextElementSibling;
  var onupdate = 0;
  if (value) {
    onupdate = data * value;
  } else if (value === 0) {
    onupdate = data * 0;
  } else {
    onupdate = data * 0;
  }
  td.innerHTML = onupdate;
}

function add_item(item, next) {
  item.parentNode.style.display = "none";
  next.style.display = "block";
  item.parentNode.nextSibling.nextSibling.nextSibling.nextSibling.firstChild.value = '';
  item.parentNode.nextSibling.nextSibling.nextSibling.nextSibling.firstChild.disabled = false;
}

function remove_item(item, prev) {
  item.parentNode.nextSibling.nextSibling.firstChild.disabled = true;
  item.parentNode.nextSibling.nextSibling.firstChild.value = '0';
  item.parentNode.nextSibling.nextSibling.nextSibling.nextSibling.innerHTML = '0';
  item.parentNode.style.display = "none";
  prev.style.display = "block";
}

<table>
  <th>Select</th>
  <th>Intake</th>
  <th>Total</th>
  {% for a in top_energy %}
  <tr>
    <td><input id="btn" type="button" value="Add" name="{{a.Food}}" onclick="add_item(this, this.parentNode.nextSibling.nextSibling)"></td>
    <td style="display: none;text-align: center;"><input id="btn" type="button" name="{{a.Food}}" value="Remove" onclick="remove_item(this,this.parentNode.previousElementSibling)"></td>
    <td><input type="Number" name="some" id="{{a.Food}}" value="0" oninput="updatevalue(this,this.value,9)" disabled></td>
    <td>0</td>
  </tr>

  <tr>
    <td><input id="btn" type="button" value="Add" name="{{a.Food}}" onclick="add_item(this, this.parentNode.nextSibling.nextSibling)"></td>
    <td style="display: none;text-align: center;"><input id="btn" type="button" name="{{a.Food}}" value="Remove" onclick="remove_item(this,this.parentNode.previousElementSibling)"></td>
    <td><input type="Number" name="some" id="{{a.Food}}" value="0" oninput="updatevalue(this,this.value,9)" disabled></td>
    <td onkeyup="totalval(this)">0</td>
  </tr>

  <tr>
    <td><input id="btn" type="button" value="Add" name="{{a.Food}}" onclick="add_item(this, this.parentNode.nextSibling.nextSibling)"></td>
    <td style="display: none;text-align: center;"><input id="btn" type="button" name="{{a.Food}}" value="Remove" onclick="remove_item(this,this.parentNode.previousElementSibling)"></td>
    <td><input type="Number" name="some" id="{{a.Food}}" value="0" oninput="updatevalue(this,this.value,9)" disabled></td>
    <td onkeyup="totalval(this)">0</td>
  </tr>
  <tr>
    <td>I want the sum of total column whenever the value of any cell in total column gets changed</td>
    <td></td>
    <td>sum</td>
  </tr>
  {% endfor %}

</table>

【问题讨论】：

您的 HTML 无效。您需要将<th> 放在<tr> 中，理想情况下应该在<thead> 中。 <table> 内的所有文本节点都应位于 <tr> 或 <th> 内。还有很多重复的代码，你应该使用addEventListener而不是onclick属性。
还有多个重复的 ID。 ID 必须是唯一的。虽然没有尝试使用 ID，但似乎不会在此处引起问题
您在哪个部分有困难？从add_item/remove_item内部调用函数？循环通过tr？找到正确的列/单元格？（即使它是一个丑陋的 .next.next.next.next，也似乎已经涵盖了这一点）。将值加在一起？这里描述的似乎没有问题，只有一个要求，这不是 SO 的用途。（“我想要”和“我怎么能”之间有细微的差别）

标签： javascript html jquery ajax

【解决方案1】：

首先，我在其中添加了“int-input”类然后我选择了所有这些

var totalValues = document.querySelectorAll(".int-input");
var total = 0;
totalValues.forEach((k) => {
  total += parseInt(k.innerHTML);
});

然后我将数字添加到结果中

function updatevalue(item, value, data) {
  var td = item.parentNode.nextElementSibling;
  var onupdate = 0;
  if (value) {
    onupdate = data * value;
  } else if (value === 0) {
    onupdate = data * 0;
  } else {
    onupdate = data * 0;
  }
  td.innerHTML = onupdate;
  var totalValues = document.querySelectorAll(".int-input");
  var total = 0;
  totalValues.forEach((k) => {
    total += parseInt(k.innerHTML);
  });
  document.querySelector(".total").innerHTML = total;
}

function add_item(item, next) {
  item.parentNode.style.display = "none";
  next.style.display = "block";
  item.parentNode.nextSibling.nextSibling.nextSibling.nextSibling.firstChild.value = '';
  item.parentNode.nextSibling.nextSibling.nextSibling.nextSibling.firstChild.disabled = false;
}

function remove_item(item, prev) {
  item.parentNode.nextSibling.nextSibling.firstChild.disabled = true;
  item.parentNode.nextSibling.nextSibling.firstChild.value = '0';
  item.parentNode.nextSibling.nextSibling.nextSibling.nextSibling.innerHTML = '0';
  item.parentNode.style.display = "none";
  prev.style.display = "block";
}

<table>
  <th>Select</th>
  <th>Intake</th>
  <th>Total</th>
  {% for a in top_energy %}
  <tr>
    <td><input id="btn" type="button" value="Add" name="{{a.Food}}" onclick="add_item(this, this.parentNode.nextSibling.nextSibling)"></td>
    <td style="display: none;text-align: center;"><input id="btn" type="button" name="{{a.Food}}" value="Remove" onclick="remove_item(this,this.parentNode.previousElementSibling)"></td>
    <td><input type="Number" name="some" id="{{a.Food}}" value="0" oninput="updatevalue(this,this.value,9)" disabled></td>
    <td class="int-input">0</td>
  </tr>

  <tr>
    <td><input id="btn" type="button" value="Add" name="{{a.Food}}" onclick="add_item(this, this.parentNode.nextSibling.nextSibling)"></td>
    <td style="display: none;text-align: center;"><input id="btn" type="button" name="{{a.Food}}" value="Remove" onclick="remove_item(this,this.parentNode.previousElementSibling)"></td>
    <td><input type="Number" name="some" id="{{a.Food}}" value="0" oninput="updatevalue(this,this.value,9)" disabled></td>
    <td class="int-input" onkeyup="totalval(this)">0</td>
  </tr>

  <tr>
    <td><input id="btn" type="button" value="Add" name="{{a.Food}}" onclick="add_item(this, this.parentNode.nextSibling.nextSibling)"></td>
    <td style="display: none;text-align: center;"><input id="btn" type="button" name="{{a.Food}}" value="Remove" onclick="remove_item(this,this.parentNode.previousElementSibling)"></td>
    <td><input type="Number" name="some" id="{{a.Food}}" value="0" oninput="updatevalue(this,this.value,9)" disabled></td>
    <td class="int-input" onkeyup="totalval(this)">0</td>
  </tr>
  <tr>
    <td>I want the sum of total column whenever the value of any cell in total column gets changed</td>
    <td class="total">0</td>
    <td>sum</td>
  </tr>
  {% endfor %}

</table>

【讨论】：

请在您的回答中提供更多详细信息。正如目前所写的那样，很难理解您的解决方案。
我已经解决了不同的 div 问题，感谢您的帮助，但如果您能帮助请告诉我如何解决删除问题，因为在删除功能上 sum 的值没有更新。再次谢谢你
请检查此功能是否正确
` function updatevalue(item, value, data) { var td = item.parentNode.nextElementSibling; var div = item.parentNode.parentNode.parentNode.parentNode.parentNode; var onupdate = 0;如果（值）{ onupdate = 数据 * 值； } else if (value === 0) { onupdate = data * 0; } 其他 { onupdate = 数据 * 0; } td.innerHTML = onupdate; var totalValues = div.querySelectorAll(".int-input");变量总计 = 0; totalValues.forEach((k) => { total += parseInt(k.innerHTML); }); div.querySelector('.total').innerHTML = total }`
抱歉这种代码格式，因为我不知道如何在评论中正确编码