Question

我有这个代码，用于根据不同列中的文本计算特定列中的总计。它工作正常，但我正在学习，所以我想知道是否有办法巩固这段代码。如你所见，我运行了一次“each（）”两次，每列一次。首先在第一列中检查“A”，然后转到第二列并添加符合条件的行。类似于第二列，只是它查找“B”并添加列3.有没有办法只运行一次每个函数并同时检查两列？

JS：

//Second Column
var total = 0;
$("#theTable tr:contains('A') td:nth-of-type(2)").each(function () {
    var pending = parseInt($(this).text());
    total += pending;
});

$("#theTable tfoot tr:last-of-type td:nth-of-type(2)").text(total);

//Third Column
var total2 = 0;
$("#theTable tr:contains('B') td:nth-of-type(3)").each(function () {
    var pending2 = parseInt($(this).text());
    total2 += pending2;
});

$("#theTable tfoot tr:last-of-type td:nth-of-type(3)").text(total2);

HTML：

<table id="theTable">
<thead>
<tr>
    <th>MONTH</th>
    <th>PENDING</th>
    <th>DENIED</th>
</tr>
</thead>
<tbody></tbody>
<tr>
    <td>A</td>
    <td>2</td>
    <td>4</td>
</tr>
<tr>
    <td>B</td>
    <td>1</td>
    <td>3</td>
</tr>
<tr>
    <td>A</td>
    <td>3</td>
    <td>2</td>
</tr>
<tr>
    <td>C</td>
    <td>3</td>
    <td>2</td>
</tr>
<tr>
    <td>A</td>
    <td>2</td>
    <td>2</td>
</tr>
<tr>
    <td>B</td>
    <td>4</td>
    <td>2</td>
</tr>
<tfoot>
    <tr>
        <td>TOTALS:</td>
        <td></td>
        <td></td>
    </tr>
</tfoot>

对于你们中的一些人来说这看起来很简单，但是我现在只是在学习一些JS。

谢谢！

Answer 1

这种类型的一些可能有帮助......

var trs = $('#'+tblID).find('tr');

var total1 = 0;
var total2 = 0;
$.each(trs, function(k, v) {
    if ($(v).text == "A"){
    total1 += parseInt($(v).parent('tr').find('td:eq(2)').text());
    }
    if ($(v).text == "B"){
    total2 += parseInt($(v).parent('tr').find('td:eq(3)').text())
    }
});

Answer 2

您可以尝试这样的事情：

var total = {A:{row:1,t:0},B:{row:2,t:0}};
$('#theTable tr').each(function() {
    $row = $(this);
    $.each(total, function(key, col) {
        rowFil = $row.filter(':contains("' + key + '")');
        col.t += (rowFil) ? +rowFil.find('td:eq(' + col.row + ')').text() : 0;
    });
});
$("#theTable tfoot tr:last td:eq(1)").text(total.A.t);
$("#theTable tfoot tr:last td:eq(2)").text(total.B.t);

Answer 3

这是另一种方法 - 我总结了所有可能值的所有统计数据：

var totals = [];
$('#theTable tbody tr').each(function(e) {      
    var tds= $(this).find('td');
    var index = $(tds[0]).text();
    var pending = parseInt($(tds[1]).text(), 10);
    var denied = parseInt($(tds[2]).text(), 10);
    if (totals[index] == undefined)
        totals[index] = { Pending: 0, Denied: 0 };
    totals[index].Pending += pending;
    totals[index].Denied += denied;
});
for (var key in totals)
    $('#theTable tfoot').append('<tr><td>'+key+'</td><td>'+
                            totals[key].Pending+'</td><td>'+totals[key].Denied+'</td></tr>');

我还稍微更新了标记，这里是jsfiddle。代码可能不那么漂亮，但可以做更多的东西并且可以重构。

Answer 4

使用总和创建第二个表可以更轻松地分析数据。

<强> SOLUTION

JS

//make a list of unique months
var months = [];
$('#theTable tr td:nth-of-type(1)').each(function(){
  var month = $(this).text();
  if(months.indexOf(month) < 0) months.push(month);
});
console.log('months', months);

//make a data structure with sums
var data = {};
var tr = $('#theTable tr');
$.each(months, function(){
  var month = this;  
  data[month] = {
    pending: 0,
    denied: 0
  };
  tr.each(function(){
    var ch = $(this).children();
    var m = $(ch[0]).text();
    var pending = $(ch[1]).text();
    var denied = $(ch[2]).text();
    if(m == month) {
      data[month].pending += parseInt(pending);
      data[month].denied += parseInt(denied);
    }
  });
});
console.log('data', data);

//make a table with the data
var table = $('<table>');
table.append($('<tr>'+
  '<th>MONTH</th>'+
  '<th>PENDING</th>'+
  '<th>DENIED</th>'+
'</tr>'));
$.each(data, function(month){
  table.append($('<tr>'+
    '<td>'+month+'</td>'+
    '<td>'+data[month].pending+'</td>'+
    '<td>'+data[month].denied+'</td>'+
  '</tr>'));
});
$('body').append(table);

使用jQuery根据另一列的文本汇总列总计

4 个答案: