代码之家 › 专栏 › 技术社区 › Goku

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

html javascript

Goku · 技术社区 · 6 年前

演示:

我真的很抱歉,如果我的问题是非常新手,因为我是非常新的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/

1 回复 | 直到 6 年前

NullPointer 6 年前

我认为你只需要重复每一个 tr 把每一个 input 在里面 td (跳过结果 td公司 仅限)。

一为每个迭代 tr公司 里面 table .

二做每一个的和 输入 在里面 td公司 每一个 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;
}

<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>