Question

我有这样的表：

enter image description here

当单元格内容相同时，我希望列'模型'中的行数。

该表具有过滤功能，这使得“固定”colspan不是解决方案。

我发现了同样的问题：
https://codereview.stackexchange.com/questions/6363/spanning-table-cells-automatically-between-same-value-cells
但遗憾的是对我不起作用。

非常好的例子也在这里：
https://stackoverflow.com/a/1294964/1861097但仅限于colspan。

对于排序和过滤，我使用http://datatables.net

表格可以在这里找到：http://ipt.czechbattlefield.info（切换到附件）

Answer 1

我写了一个关于如何使用jquery对任何表进行rowspan的示例。

请注意，代码只能在1个假设下工作：您希望行数的列是SORTED

You can play with it on Codepen（尝试编辑indexOfColumnToRowSpan）

JS：

$(function(){

  //assumption: the column that you wish to rowspan is sorted.

  //this is where you put in your settings
  var indexOfColumnToRowSpan = 0;
  var $table = $('#myTable');


  //this is the code to do spanning, should work for any table
  var rowSpanMap = {};
  $table.find('tr').each(function(){
    var valueOfTheSpannableCell = $($(this).children('td')[indexOfColumnToRowSpan]).text();
    $($(this).children('td')[indexOfColumnToRowSpan]).attr('data-original-value', valueOfTheSpannableCell);
    rowSpanMap[valueOfTheSpannableCell] = true;
  });

  for(var rowGroup in rowSpanMap){
    var $cellsToSpan = $('td[data-original-value="'+rowGroup+'"]');
    var numberOfRowsToSpan = $cellsToSpan.length;
    $cellsToSpan.each(function(index){
      if(index==0){
        $(this).attr('rowspan', numberOfRowsToSpan);
      }else{
        $(this).hide();
      }
    });
  }

})();

HTML：

<table  id="myTable">
 <tbody>
   <tr>
     <th align="left">A</th>
     <th align="left">B</th>
     <th align="left">C</th>
     <th align="left">D</th> 
   </tr>
   <tr>
     <td>Apple</td>
     <td>x</td>
     <td>y</td>
     <td>z</td>
   </tr>
   <tr>
     <td>Apple</td>
     <td>x</td>
     <td>y</td>
     <td>z</td>
   </tr>
   <tr>
     <td>Apple</td>
     <td>x</td>
     <td>y</td>
     <td>z</td>
   </tr>
   <tr>
     <td>Apple</td>
     <td>x</td>
     <td>y</td>
     <td>z</td>
   </tr>
   <tr>
     <td>Apple</td>
     <td>x</td>
     <td>y</td>
     <td>z</td>
   </tr>
   <tr>
     <td>Pear</td>
     <td>x</td>
     <td>y</td>
     <td>z</td>
   </tr>
   <tr>
     <td>Pear</td>
     <td>x</td>
     <td>y</td>
     <td>z</td>
   </tr>
   <tr>
     <td>Pear</td>
     <td>x</td>
     <td>y</td>
     <td>z</td>
   </tr>
   <tr>
     <td>Orange</td>
     <td>x</td>
     <td>y</td>
     <td>z</td>
   </tr>
   <tr>
     <td>Orange</td>
     <td>x</td>
     <td>y</td>
     <td>z</td>
   </tr>
   <tr>
     <td>Orange</td>
     <td>x</td>
     <td>y</td>
     <td>z</td>
   </tr>
   <tr>
     <td>Orange</td>
     <td>x</td>
     <td>y</td>
     <td>z</td>
   </tr>
   <tr>
     <td>Orange</td>
     <td>x</td>
     <td>y</td>
     <td>z</td>
   </tr>
   <tr>
     <td>Orange</td>
     <td>x</td>
     <td>y</td>
     <td>z</td>
   </tr>



</tbody>
</table>

当单元格相同时，创建行跨

1 个答案: