HTML列の値をテキストボックスに渡す方法

Question

データベースから動的に値を取得するHTMLテーブルがあり、合計関数を使用して列全体の合計を計算しています。

これらは私がコラム私はこれらの三つの値を計算したいテキストボックスにこれら<td> sの値を渡したい

<td id="totalValue13" style="background-color: darkseagreen;"></td> 
<td id="totalValue11" style="background-color: darkseagreen;"></td> 
<td id="totalValue12" style="background-color: darkseagreen;"></td> 

の合計を取得しています、私の列があります。私は、それを計算するためにJavaScriptを使用して下記の計算のためのJavaScriptコードされています：私はちょうどここにHTMLテーブルの列のIDを渡す方法を知りたい

<script type="text/javascript"> 
    function calculate() { 
     var result = document.getElementById('result'); 
     var el, i = 0, total = 0; 
     while (el = document.getElementById('v'+(i++))) { 
      el.value = el.value.replace(/\\D/, ""); 
      total = total + Number(el.value); 
     } 
     result.value = total; 

     if (document.getElementById('v0').value == "" && document.getElementById('v1').value == "" && document.getElementById('v2').value == "") { 
      result.value = ""; 
     } 
    } 
</script> 

。ありがとう。

Answer 1

テーブルセルに値がないため、.valueの代わりに.innerHTMLを使用してください。与えられた表のセルの合計を計算する方法の例を次に示します。それぞれの表のセルには、別々のidがあります。

function calculate() 
 
{ 
 
    var result = document.getElementById('result'); 
 
    var v1 = document.getElementById('totalValue11'); 
 
    var v2 = document.getElementById('totalValue12'); 
 
    var v3 = document.getElementById('totalValue13'); 
 
    var el, sum = 0; 
 
    
 
    var inputList = [v1,v2,v3]; 
 
    
 
    for(var i=0; i<inputList.length; i++) 
 
    { 
 
    el = inputList[i]; 
 
    if(el.innerHTML != '' && !isNaN(el.innerHTML)) 
 
    { 
 
     sum += parseFloat(el.innerHTML); 
 
    } 
 
    } 
 
    result.value = sum; // If needed to write to cell use result.innerHTML = sum; 
 
} 
 

 

 
// Call it whenever you like 
 
calculate();

td 
 
{ 
 
    background-color: darkseagreen; 
 
}

<table> 
 
<tr> 
 
    <td id="totalValue13">5</td> 
 
    <td id="totalValue11">3</td> 
 
    <td id="totalValue12">25</td> 
 
</tr> 
 
<tr> 
 
    <td colspan="2"><label for="result">Result:</label><input type="text" id="result" value="" readonly="readonly"></td> 
 
</tr> 
 
</table>