Question

我正在开发一个需要计算器功能的项目，应该支持通过javascript添加更多值，并打印出文档中所有数字的总和。输入的数字必须是两位数字。应跳过空白或非数字数据。以下是我到目前为止的情况：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Sum Calculator</title>
</head>
<body>
Number of Rows: <input type= text value=2 style="width:30px" maxlength=2 >&nbsp;&nbsp;<input type=button value='Change' onclick="" />
<br /><br />
<table cellspacing=0 cellpadding=4>
<tr><td>Number 1:</td><td><input value=20 style="width:30px" type=text  maxlength=2/></td></tr>
<tr><td>Number 2:</td><td><input value=25 style="width:30px" type=text  maxlength=2/></td></tr>
<tr><td style="border-top:solid 1px black;border-bottom:solid 1px black;">Sum:</td><td style="border-top:solid 1px black;border-bottom:solid 1px black;"><div>45</div></td></tr>
</table>
<input type=button value='Recalculate Sum' onclick="" />
</body>
</html>

有关如何使用javascript在表格中添加另一行并计算表格中所有字段的最终结果的任何建议吗？在此先感谢Laziale

Answer 1

实际上很容易。这样做：

  <table cellspacing=0 cellpadding=4>
     <tbody id="whateverId">
       <tr><td>Number 1:</td><td><input value=20 style="width:30px" type=text            maxlength=2/></td></tr>
       <tr><td>Number 2:</td><td><input value=25 style="width:30px" type=text  maxlength=2/></td></tr>
       <tr><td style="border-top:solid 1px black;border-bottom:solid 1px black;">Sum:</td><td style="border-top:solid 1px black;border-bottom:solid 1px black;"><div>45</div></td></tr>
     </tbody>
  </table>

用于创建的js：

  var trEl = document.createElement('tr');
  trEl.setAttribute('attribute', 'value'); // replace that with what you need

  var tdEl = document.createElement('td');
  // Here set td attributes
  trEl.appendChild(tdEl);
  // And same for the input im to lasy to write.

  document.getElementById('whateverId').appendChild(trEl);

而且......就是这样。将它组合成一个函数或任何你想要的东西。

对于总和，您只需执行以下操作：

  var s = 0;
  for (var i = 0; i < document.getElementById('whateverId').childNodes.length; i++)
  {
      s += document.getElementById(whateverId).childNodes[i].firstChild.firstChild.value; // Hope I counted the first childs right.... you get the point.
  }

javascript计算器功能

1 个答案: