在html表中计算

Question

我正在开发一个项目，我需要在html表中计算一些数字。他们需要看到最终的总和。 有没有其他方法可以在不使用<input>标记的情况下计算值。如果我使用，显示屏将变成盒子内的盒子，如下图所示：

我的代码如下：

<tr oninput="Total-dep.value=parseInt(Dep-main.value)+parseInt(Dep-joint1.value)">
   <td>No. of Dependant(s)</td>
   <td contenteditable="true" id="Dep-main" value="0"></td>
   <td contenteditable="true" id="Dep-joint1" value="0"></td>
   <td contenteditable="true" name="Total-dep" for="Dep-main Dep-joint1" value=""></td>
</tr>

当前显示结果如下：

我想使用前两列加在一起，然后总结在最后一列。

Answer 1

您可以使用css隐藏输入文本字段的边框。

{
    border: none;
    outline: none;
    box-shadow: none;
}

Answer 2

您可以使用input元素，只需将其设置为没有任何边框。

此外，name和value属性仅对表单元素有效，for属性对td元素无效。

最后，tr元素没有input个事件，只有表单元素有。

// Do all your JavaScript in a separate JavaScript section
var main = document.getElementById("Dep-main");
var joint1 = document.getElementById("Dep-joint1");
var total = document.getElementById("Total-dep");

var inputs = Array.prototype.slice.call(document.querySelectorAll("td > input"));

inputs.forEach(function(input){

  input.addEventListener("blur", function(){
    // Always supply the second argument to parseInt() (the radix) so you
    // dont' get non-base 10 answers.
    total.value = parseInt(main.value, 10) + parseInt(joint1.value, 10);
  });

});

td { border:1px solid black; }
td > input { border:none; } /* Remove normal border */
td > input:active, td > input:focus { outline:none; } /* Remove outline when active or focused */

<table>
<tr>
  <td>Other</td>
  <td>Some</td>
  <td>Other</td>
  <td>Row</td>
</tr>
<tr id="row">
   <td>No. of Dependant(s)</td>
   <td><input type="text" id="Dep-main" value="0"></td>
   <td><input type="text" id="Dep-joint1" value="0"></td>
   <td><input type="text" id="Total-dep" readonly></td>
</tr>
</table>