Question

我喜欢动态地将colspans和/或rowpans添加到表格单元格，当它包含与相邻单元格中的内容相同的特定内容时。它允许使用jQuery完成。

状态：

<table>
<tr>
    <td>E</td>
    <td>E</td>
</tr>
<tr>
    <td>Y</td>
    <td>W</td>
</tr>
<tr>
    <td>Y</td>
    <td>E</td>
</tr>
</table>

应该看起来像

<table>
<tr>
    <td colspan="2">E</td>
</tr>
<tr>
    <td rowspan="2">Y</td>
    <td>W</td>
</tr>
<tr>
    <td>E</td>
</tr>
</table>

这里可以找到小提琴示例： http://jsfiddle.net/SchweizerSchoggi/rtcd9r4g/

首先＆＃34;座位图＆＃34;是当前状态，第二个应该是什么样子。

感谢任何想法!!!

Answer 1

使用jQuery，并为每个单元格添加唯一ID：

<table>
<tr>
    <td id="1-1">E</td>
    <td id="1-2">E</td>
</tr>
<tr>
    <td id="2-1">Y</td>
    <td id="2-2">W</td>
</tr>
<tr>
    <td id="3-1">Y</td>
    <td id="3-2">E</td>
</tr>
</table>

<script>
$("#1-1").attr("colspan","2");
$("#1-2").remove();
$("#2-1").attr("rowspan","2");
$("#3-1").remove();
</script>

Answer 2

这是代码。将它附加到JS的末尾。

var i = 0;
var $trs = $('#cabin1 tr');
$trs.each(function() {
    var $tds = $(this).find('td');
    var width = $tds.length;
    var num = 2;
    for(i = width - 2; i >= 0; i--) {
        if($($tds[i]).html() == $($tds[i + 1]).html() && $($tds[i]).html() != ""){
            $($tds[i]).attr('colspan', num);
            num++;
            $($tds[i + 1]).remove();
        } else {
            num = 2;
        }
    }
    $tds = $(this).find('td');
    width = $tds.length;
    $($tds[0]).attr('seq', 0);
    for(i = 1; i < width; i++) {
        $($tds[i]).attr('seq', parseInt($($tds[i - 1]).attr('seq')) + $($tds[i - 1]).prop('colspan'));
    }
});

var height = $trs.length;
var j = 0;

for(i = height - 2; i >= 0; i--){
    $($trs[i]).find('td').each(function() {
        var seq = parseInt($(this).attr('seq'));
        var $tdUnder = $($trs[i + 1]).find('td[seq="' + seq + '"]');
        if($tdUnder.length && ($tdUnder.html() != "") && ($tdUnder.html() == $(this).html()) && ($tdUnder.prop('colspan') == $(this).prop('colspan'))) {
            $(this).prop('rowspan', $tdUnder.prop('rowspan') + 1);
            $tdUnder.remove();
        }
    });
}

您可以在此处查看结果：http://jsfiddle.net/Frederick888/rtcd9r4g/55/

Answer 3

尝试以下代码：

//function to check adjucent tds
var colspanCount = 1;
var validateAdjucentTd = function(adjacentTd, classOfTd){
    var $adjacentTd= $(adjacentTd);
    //check if next row td of adjacent td has same class
    var indexOfadjacentTd = $adjacentTd.index();  
    var $nextRowTdOfadjacentTd = $adjacentTd.closest('tr').next('tr').find(':nth-child('+(indexOfadjacentTd + 1)+')');          
    //mark both tds for removal
    if(classOfTd == $nextRowTdOfadjacentTd.attr('class'))
    {
        $nextRowTdOfadjacentTd.addClass('tdToRemove');
        $adjacentTd.addClass('tdToRemove');
        colspanCount++;
        var nextTd = $adjacentTd.next('td');
        if(classOfTd == $(nextTd).attr('class'))
          validateAdjucentTd(nextTd, classOfTd);  
    }
}
//iterate all Tds
    $('table tr td').each(function(){
        //reset colspan count
        colspanCount = 1;
        //check if td is not empty and not marked for removal
        if(!$(this).is(':empty') && !$(this).hasClass('tdToRemove'))
       {
           var indexOfTd = $(this).index();
           var classOfTd = $(this).attr('class');
           //get TD from next row using index of current td
           var $nextRowTd = $(this).closest('tr').next('tr').find(':nth-child('+(indexOfTd + 1)+')');
           //get adjacent td
           var $adjacentTd = $(this).next('td');
          //if class matches for next row td then mark it for removal
          if(classOfTd == $nextRowTd.attr('class'))
          {
            $nextRowTd.addClass('tdToRemove');
            $(this).data('rowspan','2');
            $(this).addClass('spanToAdd');
          }

          //if class of adjacent td matches
          if(classOfTd == $adjacentTd.attr('class'))
          {
            validateAdjucentTd($adjacentTd, classOfTd);
            if(colspanCount > 1)
              {
                $(this).data('colspan',colspanCount);
                $(this).addClass('spanToAdd');
              }
          }   
        }      
    });

   //remove all td marked for removal
   $('.tdToRemove').remove();

   //modify colspan and rowspan of the tds identified
   $('table tr td.spanToAdd').each(function(){
      var rowSpan = parseInt($(this).data('rowspan')) || 1;
      var colSpan = parseInt($(this).data('colspan')) || 1;    
      $(this).attr('rowspan',rowSpan); 
      $(this).attr('colspan',colSpan); 
   });

<强> JSFiddle Demo

将colspans和/或rowpans动态添加到表格单元格

3 个答案: