Сделать rowspan, когда ячейки идентичны

У меня есть такая таблица:

введите здесь описание изображения

Мне нужен диапазон строк в столбце «модель», когда содержимое ячеек идентично.

В таблице есть функция фильтра, которая делает "фиксированный" 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 (переключиться на вложения)


javascript jquery css html-table
person Johncze    schedule 26.12.2012    source источник
comment
Как фильтрация должна работать после этого?   -  person Alexander    schedule 27.12.2012
comment
Я не понимаю, вы хотите показывать в таблице только отдельные элементы?   -  person Pedro Estrada    schedule 27.12.2012
comment
Эти значки выглядят так, как будто они делают уникальные вещи — что происходит с ними, когда вы сворачиваете свои строки...?   -  person Sampson    schedule 27.12.2012
comment
Я полагаю, вы имеете в виду rowspan.   -  person Shmiddty    schedule 27.12.2012
comment
Покажите нам код, который вы используете для фильтрации таблицы. Конечно, в него необходимо будет интегрировать сценарий, охватывающий ячейки. Покажите нам, как вы пытались использовать найденные сценарии.   -  person Bergi    schedule 27.12.2012
comment
где твой код? поместите свой код на jsfiddle или codepen   -  person Ji_in_coding    schedule 25.10.2016

Ответы (1)


arrow_upward
2
arrow_downward

Я написал пример того, как связать любую таблицу с помощью jquery.

Обратите внимание, что код работает только при одном допущении: столбец, который вы хотите использовать для строки, СОРТИРОВАН

Вы можете поиграть с ним на 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>
person Ji_in_coding    schedule 24.10.2016