Question

演示：

如果我的问题是新手，我真的很抱歉，因为我是HTML和JS的新手。我正在尝试添加两个表数据（默认值和Extra），并在第三列（输出）中打印数字输出

我还想知道如果我点击了“提交”按钮，那么更新后的页面（更新了第三列）是否可以填充在同一页面上

希望我已经正确地传达了，谢谢。

<form name="CheckOn" >

<table BORDER="1">

<tr class="heading">
  <td>Items</td>
  <td>Default value</td>
  <td>Extra(if any)</td>
  <td>Output</td>
 </tr>

<tr>
  <tr>

    <td>Apple</td>
    <td>
      <input type="text" value="26" size=15 name="apple">
    </td>
    <td>
      <input type="text" value="0" size=15 name="apple">
    </td>
    <td>
      <input type="text" size=15 name="apple">
    </td>
  </tr>

  <tr>
    <td>Mango</td>
    <td><input type="text" size=15 value="26" name="mango"></td>
    <td>
      <input type="text" value="0" size=15 name="mango">
    </td>
    <td>
      <input type="text" size=15 name="mango">
    </td>
  </tr>

</table>

<p><input type="submit" value="submit" name="subs"></p>

https://jsfiddle.net/za7wox59/1/

Answer 1

我认为您只需迭代每个tr并在input内对每个td求和（仅跳过结果td）。

1。。对tr中的每个table进行迭代。

2。对每个input的{{1}}内的每个td求和。

3。。如果tr的索引为td，则设置总和。

此处是有效的代码段：

注意： 我已将result td分配给表。

id

document.getElementById("subs").addEventListener("click", function(e){
e.preventDefault(); //Just prevent to form submit for demo.
var resultTD=3;
    $('#tblID tr').each(function() {
    var sum=0;
    $.each(this.cells, function(index){
     if(index==resultTD){
          $(this).find("input").val(sum);
      }else{
          $(this).find("input").each(function(index) {
              sum=sum+parseInt(this.value);
            });
      }
    });
   });
});

tr.heading {
    display: table-row;
    font-size:18px;
	  font-family:cursive;
    background-color:lightgreen;
    cursor:pointer;
	border-collapse:collapse;
	font-weight:bold;
}

如何添加表数据并在单页中显示输出

1 个答案: