javascript - 当单元格相同时制作行跨度

Question

我有这样的表:

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

Table 有一个过滤功能，这使得“固定”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 对任何表进行行跨越。

请注意，代码仅在 1 个假设下有效:您希望 rowspan 的列已排序

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>