javascript - jQuery 中列的总计

标签 javascript jquery

以下代码无效。正如您在 jsfiddle 上看到的那样,我需要按列汇总所有内容.出了什么问题?

HTML

<table id="sum_table" width="300" border="1">
    <tr>
        <td>Apple</td>
        <td>Orange</td>
        <td>Watermelon</td>
    </tr>
    <tr>
        <td class="rowDataSd">1</td>
        <td class="rowDataSd">2</td>
        <td class="rowDataSd">3</td>
    </tr>
    <tr>
        <td class="rowDataSd">1</td>
        <td class="rowDataSd">2</td>
        <td class="rowDataSd">3</td>
    </tr>
    <tr>
        <td class="rowDataSd">1</td>
        <td class="rowDataSd">2</td>
        <td class="rowDataSd">3</td>
    </tr>
    <tr class="totalColumn">
        <td class="totalCol">Total:</td>
        <td class="totalCol">Total:</td>
        <td class="totalCol">Total:</td>
    </tr>
</table>

Javascript

$(document).ready(function(){


   $(".rowDataSd").each(function() {
      newSum.call(this);
    });

});


function newSum() {
    var $table = $(this).closest('table');
    var total = 0;

    $(this).attr('class').match(/(\d+)/)[1];

$table.find('tr:not(.totalColumn) .rowDataSd').each(function()  {
        total += parseInt($(this).html());

});

$table.find('.totalColumn td:nth-child('')').html(total);
}

最佳答案

这是一个jsffile .希望这有帮助

  <table id="sum_table" width="300" border="1">
        <tr class="titlerow">
            <td>Apple</td>
            <td>Orange</td>
            <td>Watermelon</td>
        </tr>
        <tr>
            <td class="rowDataSd">1</td>
            <td class="rowDataSd">2</td>
            <td class="rowDataSd">3</td>
        </tr>
        <tr>
            <td class="rowDataSd">1</td>
            <td class="rowDataSd">2</td>
            <td class="rowDataSd">3</td>
        </tr>
        <tr>
            <td class="rowDataSd">1</td>
            <td class="rowDataSd">5</td>
            <td class="rowDataSd">3</td>
        </tr>
        <tr class="totalColumn">
            <td class="totalCol">Total:</td>
            <td class="totalCol">Total:</td>
            <td class="totalCol">Total:</td>
        </tr>
    </table> 
<script>
       var totals=[0,0,0];
        $(document).ready(function(){

            var $dataRows=$("#sum_table tr:not('.totalColumn, .titlerow')");

            $dataRows.each(function() {
                $(this).find('.rowDataSd').each(function(i){        
                    totals[i]+=parseInt( $(this).html());
                });
            });
            $("#sum_table td.totalCol").each(function(i){  
                $(this).html("total:"+totals[i]);
            });

        });
</script>

关于javascript - jQuery 中列的总计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10802244/

相关文章:

javascript - Slick.js:获取当前和全部幻灯片(即 3/5)

javascript - 使用第一个字符中标点符号的自定义排序对 JavaScript 字符串数组进行排序

javascript - 使用 jQuery + 正则表达式删除方括号及其内容

Jquery 悬停子项,否定父项悬停效果

jquery - 如何分离 HTML 折叠列表中的超链接?

javascript - 如何防止硬跳以及位置: sticky?的替代方法是什么

javascript - 将不同的 MQTT 主题数据合并到红色节点中的一个 JSON 字符串中

javascript - 比较选择框时序

jquery - 单击显示/隐藏 div,在 div 外部单击时切换

jQuery 在tinyMCE 编辑器中获取N 个元素的计数