Question

我有一个表，我想在用户访问页面时添加并显示div中td值的SUM。

<table>
 <thead>
  <tr>
   <th>Value</td>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td class="d">PHP <?php echo number_format($l['target_daily'], 2) ?></td>
  </tr>
 </tbody>
</table>

和一些javascript得到总和页面加载

<script>
$(calculateSumm);

function calculateSumm() {

    var sum = 0;
    $(".d").each(function() {
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }

    });
    $('#result').html(sum);    
};
</script>

<div id="result>//This will display sum values but returns 0</div>

我在这里缺少什么？

Answer 1

问题是您正在使用this.value，td个元素没有value只有input元素和类似元素），并且您在单元格文本的开头有PHP。

参见代码注释：

$(calculateSumm);

function calculateSumm() {

    var sum = 0;
    $(".d").each(function() {
        // Get the text of the cell
        var val = $(this).text()
        // Remove the PHP at the beginning
        val = val.replace(/^\s*PHP\s*/, '');
        if (val.length) {
            // Parse it
            val = parseFloat(val);
            if (!isNaN(val)) {
                // Add it
                sum += val;
            }
        }
    });
    $('#result').html(sum);    
};

我们正在替换＆＃34; PHP＆＃34;可以使用一些额外的解释：

val = val.replace(/^\s*PHP\s*/, '');

这意味着：＆＃34;匹配可选空格，后跟PHP，后跟字符串开头的可选空格，并将其替换为空字符串＆＃34;。

旁注：没有理由怀疑代码出了什么问题。您的浏览器内置了一个JavaScript调试器，它允许您在代码中设置断点以暂停它，检查变量，单步执行代码以观察它运行等。查看菜单中的＆＃34;开发工具＆＃34; （大多数浏览器上的F12和/或Ctrl + Shift + I）。

Answer 2

试试这个：

<script>
$(calculateSumm);

function calculateSumm() {

  var sum = 0;
  $(".d").each(function() {
      sum += parseFloat($(this).text());
  });

  $('#result').html(sum);    
};

</script>

值属性不适用于TD元素。所以我用 $（this）.text（）替换了 this.value ，它使用jquery从td元素的内部获取文本值。

Answer 3

正如@ T.J Crowder所建议的

<script>
$(calculateSumm);

function calculateSumm（）{

var sum = 0;
$(".d").each(function() {
    // Get the text of the cell
    var val = $(this).text()
    // Remove the PHP at the beginning
    val = val.replace(/^\s*PHP\s*/, '');
    if (val.length) {
        // Parse it
        val = parseFloat(val);
        if (!isNaN(val)) {
            // Add it
            sum += val;
        }
    }
});
//$('#result').html(sum);   
$("#result").html(sum.toFixed(2).replace(/(^\d{1,3}|\d{3})(?=(?:\d{3})+(?:$|\.))/g, '$1,'));

};

现在它有效。完美

添加所有td值时，Javascript返回0

3 个答案: