【问题标题】:jQuery: SUM of columns and merge them to one cell (Replace them with SUM result) [closed]jQuery:列的总和并将它们合并到一个单元格(用总和结果替换它们)[关闭]
【发布时间】:2013-07-05 02:23:30
【问题描述】:

我想换这张桌子:

用 jQuery 可以吗?

如果是,请向我发送类似的示例或任何解决方法。

编辑: 我知道如何阅读所有 td 的

$('#tableid tbody tr').each(function() {

    $.each(this.cells, function(){
        var celltext = $(this).text();
    });

});

此外,每个相似的值可以这样分组到一个单元格中:

var $rows = $('#tableid tbody tr');
var items = [],
    itemtext = [],
    currGroupStartIdx = 0;
$rows.each(function(i) {
    var $this = $(this);
    var itemCell = $(this).find('td:eq(0)');
    var item = itemCell.text();
    itemCell.remove();
    if ($.inArray(item, itemtext) === -1) {
        itemtext.push(item);
        items.push([i, item]);
        groupRowSpan = 1;
        currGroupStartIdx = i;
        $this.data('rowspan', 1)
    } else {
        var rowspan = $rows.eq(currGroupStartIdx).data('rowspan') + 1;
        $rows.eq(currGroupStartIdx).data('rowspan', rowspan);
    }

});

$.each(items, function(i) {
    var $row = $rows.eq(this[0]);
    var rowspan = $row.data('rowspan');
    $row.prepend('<td rowspan="' + rowspan + '" style="white-space:nowrap;">' + this[1] + '</td>');
});

这是目前为止的 PHP 解决方案:

foreach($tabledata as $key => $val){
 $rowspan = (count($val) > 1 ? ' rowspan="'.count($val).'" ' : '');
   $spancount = 0;
   foreach($val as $vkey => $vval){
     $spancount++;
      echo '
      <tr>
      ';
       if($spancount == 1){
        echo '
        <td'.$rowspan.'>'.$key.'</td>
        ';
       }
      echo '
      <td>'.$vval[0].'</td>
      ';
      echo '
      <td>'.$vval[1].'</td>
      ';
     if($spancount == 1){
      echo '
      <td'.$rowspan.'>'.$sums[$key].'</td>
      ';
     }
      echo '</tr>
      ';
   }
}

【问题讨论】:

  • 您确定“名称”列的顺序始终正确吗?
  • 拥有 3k+ 的声望,你现在应该知道如何提出一个好的问题了。
  • @Eric:我对此感到困惑,我确实通过 PHP 解决了,但我放弃了 jQuery...抱歉
  • @Akam 你“放弃”了吗?这意味着您有一些不完整或无法正常工作的代码——您可以发布(根据 Zenith 的建议)吗?
  • @Zenith:我不想要精确的解决方案,我只需要一种方法来解决这个问题

标签: javascript jquery dom html-table


【解决方案1】:

好的,你说你只是想要一个通用的方法,你不需要代码。

遍历行。如果 col 0 与上一个不同,则将此行记住为一组中的第一行,并将 col 0 的文本记住为“上一个”值。

如果col 0与前一个值相同,则将col 1的内容添加到集合的第一行col 1中,从该行中删除col 1,并增加第一行col 1的rowspan。

代码中的一个问题:

$rows.data("rowspan")

应该是

$this.children("td:eq(1)").attr("rowspan")

【讨论】:

  • 谢谢,您的想法与发布的示例相似。我得到了一个关于如何开始对相似名称(单元格值)进行分组的完美解决方案。
【解决方案2】:

嗯,我试了一下。我冒昧地将类名放入 TD 和 TR,JavaScript 可以清理很多,但它确实有效。

var first_row = '<tr class="row"><td class="id">NULL</td></tr>';
var rowCount = 0;
var rowSum = 0;
$.each($('.row'), function (index, curRow) {
    if ($(first_row).find('.id').text() != $(curRow).find('.id').text()) {
        if (rowCount > 1) {
            $(first_row).find('.val').text(rowSum);
            $(first_row).find('.val').attr('rowspan', rowCount).css('background-color','silver');
            for (i = 0; i < rowCount; i++) {
                $(first_row).next('.row').find('.val').remove();
            }
        }
        first_row = $(curRow);
        rowSum = 0;
        rowCount = 0;
    }
    rowSum += parseInt($(curRow).find('.val').text());
    rowCount += 1;
});
if (rowCount > 1) {
    $(first_row).find('.val').text(rowSum);
    $(first_row).find('.val').attr('rowspan', rowCount).css('background-color','silver');
    for (i = 0; i < rowCount; i++) {
        $(first_row).next('.row').find('.val').remove();
    }
}

Link to Demo

【讨论】:

  • 太棒了!谢谢,我会在斋月的祈祷中提到你:)
  • @Akam - 乐于助人。
  • 只是一个简单的问题:在我的表格中,有些情况下合并了超过 5 个单元格,行跨度计数是正确的,但是,只删除了前三个单元格,之后,没有删除单元格。看这个演示:jsfiddle.net/CErrN/4
  • 我错过了主要的边缘条件。我在jsfiddle.net/rDBfv/1 更新了代码
  • 再次感谢,我真的很感谢你的帮助,你比谁关闭问题要好得多,我看到好人总是无处不在:)
猜你喜欢
  • 2022-01-07
  • 2015-01-06
  • 1970-01-01
  • 2013-04-27
  • 2023-04-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多