javascript - Jquery - Sum of each same class li value

Question

Currently I'm Developing an Invoice app with php , mysql & jquery. I want to show some details with jquery. I have dynamically created tables with dynamic data.

<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 classes are dynamically created. my jquery code

 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);
        });
    });
});

I want this result

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

I don't have any idea. please help me... Thanks.

Answer 1

Pretty short solution:

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/

Brief explanation:

1). each collects the data into an object:

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

2). map creates an array:

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

3). array items are joined into a string using </tr><tr> as separator.

Answer 2

Create an array of "items" and increment the associated quantity of each as you loop through every li. Then output the table.

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

I am using .each loop on all li and store the values in the Object variable as key-value pairs.
Then, looping over created object properties building the desired table.

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

Have a look at this FIDDLE.

Answer 4

Please omit the jquery code that you have posted in your question and use the one below:

Complete Jquery Solution:

Tested and Working

$(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/