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

Question

演示：

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

此外，我想知道如果我点击提交按钮，更新的页面（第三列更新）将填充在同一页面上

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

<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的td内做每个tr的总和。

3.如果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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="CheckOn" >
<table id="tblID" BORDER="1">
<tr class="heading">
  <td>Items</td>
  <td>Default value</td>
  <td>Extra(if any)</td>
  <td>Output</td>
 </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="SDK"></td>
    <td>
      <input type="text" value="0" size=15 name="SDK">
    </td>
	<td>
      <input type="text" size=15 name="SDK">
    </td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>
      <input type="text" value="26" size=15 name="Banana">
    </td>
    <td>
      <input type="text" value="27" size=15 name="Banana">
    </td>
	<td>
      <input type="text" size=15 name="Banana">
    </td>
  </tr>
  <tr>
</table>
<p><input type="submit" value="submit" id="subs" name="subs"></p>