html表中的計算

我正在開發一個項目，我需要在html表中計算一些數字。他們需要看最後的總和。有沒有其他方法可以在不使用<input>標記的情況下計算出該值。如果我使用時，顯示屏將變得像框內框，像下面的圖片： html表中的計算

我的代碼如下：

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

當前顯示的結果是以下：

我想要使用前兩列加起來，然後總結在最後一列。

來源

2017-06-27 xhinvis

你能分享你的嘗試！ –

事件應該是'onblur' – Laazo

您可以使用CSS來修改每個輸入框的外觀。 – hRdCoder

您可以使用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>

來源

2017-06-27 14:37:04

您可以使用CSS隱藏輸入文本字段的邊框。

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

來源

2017-06-27 14:45:29 prajeesh

html表中的計算

回答

相關問題