当单元格相同时制作行跨度答案

【问题标题】：Make rowspan when cells are identical当单元格相同时制作行跨度
【发布时间】：2016-10-25 06:00:25
【问题描述】：

我有这样的表：

当单元格的内容相同时，我希望在“模型”列中有一个行跨度。

表格具有过滤功能，这使得“固定” 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（切换到附件）

【问题讨论】：

过滤之后应该如何工作？
我不明白，您只想在表格中显示不同的项目？
这些图标看起来像是在做独特的事情 - 当您折叠行时它们会发生什么...？
我相信你的意思是rowspan。
向我们展示您用于过滤表格的代码。当然，需要在其中集成一个单元格生成脚本。向我们展示您如何尝试使用您找到的脚本。

标签： javascript jquery css html-table

【解决方案1】：

我写了一个关于如何使用 jquery 跨行跨表的示例。

请注意，代码仅在 1 个假设下有效：您希望行跨度为已排序的列

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>

【讨论】：