Question

目前我正在使用php，mysql＆amp ;;开发一个发票应用程序jQuery的。我想用jquery显示一些细节。我已动态创建包含动态数据的表。

<table class="report_table">
    <tr>
        <td class="items_id">
            <ul>
                <li class="KKTF0">KKTF0</li>
                <li class="PEN01">PEN01</li>
            </ul>
        </td>
        <td class="items_qty">
            <ul>
                <li class="KKTF0">1</li>
                <li class="PEN01">2</li>
            </ul>
        </td>
    </tr>
</table>
<table class="report_table">
    <tr>
        <td class="items_id">
            <ul>
                <li class="BKK01">BKK01</li>
                <li class="KKTF0">KKTF0</li>
                <li class="PEN01">PEN01</li>
            </ul>
        </td>
        <td class="items_qty">
            <ul>
                <li class="BKK01">4</li>
                <li class="KKTF0">2</li>
                <li class="PEN01">3</li>
            </ul>
        </td>
    </tr>
</table>

li类是动态创建的。我的jquery代码

 jQuery(document).ready(function() {
    $('.report_table').each(function() {
        $('.items_id ul li').each(function() {
            $(this).addClass($(this).text());
            var className = $(this).attr("class");
            $(this).parents('tr').find('td.items_qty li').eq($(this).index()).addClass(className);
        });
    });
});

我想要这个结果

<table>
    <tr>
        <th>Item Id</th>
        <th>Sum of Item</th>
    </tr>
    <tr>
        <td>KKTF0</td>
        <td>3</td>
    </tr>
    <tr>
        <td>PEN01</td>
        <td>5</td>
    </tr>
    <tr>
        <td>BKK01</td>
        <td>4</td>
    </tr>
</table>

我什么都不知道。请帮帮我......谢谢。

Answer 1

非常简短的解决方案：

var data = {};
$('.report_table .items_qty li').each(function() {
    data[this.className] = (data[this.className] || 0) + +$(this).text();
});

var table = '<table class="result"><tr><tr><th>Item Id</th><th>Sum of Item</th></tr>' + 
$.map(data, function(qty, key) {
    return '<td>' + key + '</td><td>' + qty + '</td>';
}).join('</tr><tr>') + '</tr></table>';

http://jsfiddle.net/VF7bz/

简要说明：

1）。 each将数据收集到对象中：

{"KKTF0":3,"PEN01":5,"BKK01":4}

2）。 map创建一个数组：

["<td>KKTF0</td><td>3</td>","<td>PEN01</td><td>5</td>","<td>BKK01</td><td>4</td>"]

3）。数组项使用</tr><tr>作为分隔符连接到字符串中。

Answer 2

创建一个“项目”数组，并在循环每个li时增加每个项目的相关数量。然后输出表格。

function sum() {

    // This will hold each category and value
    var sums = new Array();

    $('li').each(function() {
        var item = new Object();

        // Get category
        item.category = $(this).attr('class');

        // Get count
        if (isFinite($(this).html())) {
            item.count = parseInt($(this).html());
        }
        else {
            // Skip if not a number
            return;
        }

        // Find matching category
        var exists = false;
        for (var i = 0; i < sums.length; i++) {
            if (sums[i].category == item.category) {
                exists = true;
                break;
            }
        }

        // Increment total count
        if (exists) {
            sums[i].count += item.count;
        }
        else {
            // Add category if it doesn't exist yet
            sums.push(item);
        }

    });

    var table = '<table><tr><th>Item Id</th><th>Sum of Item</th></tr><tbody>';

    // Add rows to table
    for (var i = 0; i < sums.length; i++) {
        table += '<tr><td>' + sums[i].category + '</td><td>'
            + sums[i].count + '</td></tr>';
    }

    // Close table
    table += '</tbody></table>';

    // Append table after the last table
    $('table :last').after(table);
}

Answer 3

我在所有.each上使用li循环，并将Object变量中的值存储为键值对。
然后，循环创建所需对象属性，构建所需的表。

var resultObj = {};
$('li').each(function (idx, item) {
    var $item = $(item);
    var prop = $item.attr('class');
    if (!resultObj[prop]) {
        resultObj[prop] = 0;
    }
    var parsedVal = parseInt($item.text(), 10);
    resultObj[prop] += isNaN(parsedVal) ? 0 : parsedVal;
});

var $resultTable = $('<table />');
$resultTable.append('<tr><th>Item Id</th><th>Sum of Item</th></tr>');
for (var key in resultObj) {
    var $row = $('<tr />');
    $row.append($('<td />', {
        text: key
    }))
        .append($('<td />', {
        text: resultObj[key]
    }));
    $resultTable.append($row);
}
$('body').append($resultTable);

看看这个FIDDLE。

Answer 4

请省略您在问题中发布的jquery代码，并使用下面的代码：

完成Jquery解决方案：

经过测试和工作

$(document).ready(function() {
    //Create table to fill with data after last report table
    $('<table id="sumtable"><th>Item Id</th><th>Sum of Item</th></table>').insertAfter($('.report_table').last());
    //Loop through each report table, fetch amount and update sum in '#sumtable'
    $('.report_table').each(function(){
        var currtable = $(this);
        $(this).find('.items_id ul li').each(function(){
            //cache obj for performance
            var curritem = $(this);
            var itemid = curritem.html();
            var itemvalue = parseInt(currtable.find('.items_qty ul li:eq('+curritem.index()+')').html());
            var sumrow = $('#sumtable tbody').find('tr.'+itemid);
            if(sumrow.length == 0){
                //no rows found for this item id in the sum table, let's insert it
                $('#sumtable tbody').append('<tr class="'+itemid+'"><td>'+itemid+'</td><td>'+itemvalue+'</td></tr>');
            } else {
                //Row found, do sum of value
                sumrow.find('td').eq(1).html(parseInt(sumrow.find('td').eq(1).html())+itemvalue);
                console.log(sumrow.find('td').eq(1).html());
            }
        });
    }) 
});

DEMO： http://jsfiddle.net/N3FdB/

Jquery - 每个相同类li值的总和

4 个答案: