2

現在、php、mysql、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>

わかりません。私を助けてください...ありがとう。

4

4 に答える 4

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>、セパレータとして使用して文字列に結合されます。

于 2013-04-18T18:40:31.243 に答える
0

「アイテム」の配列を作成し、ループごとにそれぞれの関連付けられた数量を増やします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);
}
于 2013-04-18T18:24:13.043 に答える
0

.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を見てください。

于 2013-04-18T18:24:32.853 に答える
0

質問に投稿した 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());
            }
        });
    }) 
});

デモ: http://jsfiddle.net/N3FdB/

于 2013-04-18T18:49:37.000 に答える