基于表 TD 的 onkeyup 元素求和表列答案

【问题标题】：summing table column based on onkeyup element of the table TD基于表 TD 的 onkeyup 元素求和表列
【发布时间】：2016-04-16 19:00:45
【问题描述】：

我有一个 onkeyup 方法可以自动更新每个行标签。在表的末尾有一个自动更新总和的标签标记。我在将最终标签更新为列的总和时遇到问题，

这是我的代码

<table class="display" cellspacing="0" width="100%" id="paymentTable">
  <thead>
    <th style="width: 1%;">NO</th>
    <th style="width: 30%;">MATA UANG</th>
    <th>RATE</th>
    <th>SETORAN</th>
     <th>TOTAL IDR</th>
  </thead>
  <tbody>
  <?php
    $i = 1;
    while ($row = $result->fetch_array()) {
      echo "<tr>";
      echo "<td style='width: 1%; '>$row[curr_id]</td>";
      echo "<td>$row[curr_code] - $row[curr_desc]</td>";
      echo "<td><input type='hidden' value='$row[conv_rate]' id='convRate$i'>$row[conv_rate]</td>";
      echo "<td><input type='text' onkeyup='processCurr($i);' id='inputCurr$i'/></td>";
      echo "<td><label id='calculatedCurr$i' class='calculatedCurr'></label></td>";
      echo "</tr>";
      $i++;
    }
  ?>
  </tbody>
</table><br/>
TOTAL = <label id='totalSumPayment'></label>

还有我的 javascript，

<script>
    $('#paymentTable').dataTable();
    function processCurr(param){    
        var inputcurr= $('#inputCurr'+param).val();
        var conversion = $('#convRate'+param).val();
        $('#calculatedCurr'+param).html(inputcurr * conversion);
        calculateSum();
    }

    function calculateSum(){
        var sum = 0;
        //iterate through each textboxes and add the values
        $(".calculatedCurr").each(function() {
            //add only if the value is number
            if (!isNaN(this.value) && this.value.length != 0) {
                sum += parseFloat(this.value);
//                $(this).css("background-color", "#FEFFB0");
            }
            else if (this.value.length != 0){
//                $(this).css("background-color", "red");
            }
        });

    $("#totalSumPayment").val(sum.toFixed(2));
    }
</script>

我的问题是，calculateSum() 没有按预期工作，因为<label> 上没有显示任何值。我得到 error = TypeError: this.value is undefined on the firebug。请帮帮我....

【问题讨论】：

这里的类calculatedCurr元素不是文本框。所以this.value不会得到正确的值。正确的值在.calculatedCurr元素的内部html中。

标签： javascript php jquery mysql ajax

【解决方案1】：

this 未指向特定元素。你必须使用$.each函数中的参数。

      $(".calculatedCurr").each(function(key, value) {
        //add only if the value is number
        if (!isNaN(value) && value.length != 0) {
            sum += parseFloat(value);
//                $(key).css("background-color", "#FEFFB0");
        }
        else if (value.length != 0){
//                $(key).css("background-color", "red");
        }
      });

【讨论】：

【解决方案2】：

您的代码的问题如下。

//iterate through each textboxes and add the values 
      $(".calculatedCurr").each(function() {
            //add only if the value is number
            if (!isNaN(this.value) && this.value.length != 0) {
                sum += parseFloat(this.value);
//                $(this).css("background-color", "#FEFFB0");
            }
            else if (this.value.length != 0){
//                $(this).css("background-color", "red");
            }
        });

这里 .calculatedCurr 元素不是文本框。它们是标签。所以 this.value 不会得到正确的值。正确的值在内部 html 中.calculatedCurr 元素。

【讨论】：