如何将HTML列的值传递到文本框

时间:2017-12-23 13:50:12

标签: javascript html

我有一个HTML表从数据库中动态获取值,我使用sum函数计算整列的总和。

这些是我的列,我将获取列的总和

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

我想将这些<td>的值传递到我想要计算这三个值的文本框中。我使用JavaScript来计算它,下面给出了一个用于计算的JavaScript代码:

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

我只想知道如何在这里传递HTML表列的id。感谢。

1 个答案:

答案 0 :(得分:0)

使用.innerHTML代替.value,因为表格单元格没有值。下面是一个如何计算给定表格单元格总和的示例,每个表格单元格都有一个单独的id

&#13;
&#13;
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();
&#13;
td
{
  background-color: darkseagreen;
}
&#13;
<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>
&#13;
&#13;
&#13;