Buat lebar baris ketika sel-selnya identik

Saya punya tabel seperti ini:

masukkan deskripsi gambar di sini

Saya ingin rentang baris di kolom 'model' ketika konten selnya identik.

Tabel memiliki fungsi filter, yang menjadikan colspan "tetap" bukan solusi.

Saya menemukan pertanyaan yang sama:
https://codereview.stackexchange.com/questions/6363/spanning-table-cells-automatically-between-same-value-cells
tetapi sayangnya tidak berhasil untuk saya.

Contoh yang sangat bagus juga ada di sini:
https://stackoverflow.com/a/1294964/1861097 tetapi untuk colspan hanya.

Untuk menyortir dan memfilter saya menggunakan http://datatables.net

Tabel dapat ditemukan di sini: http://ipt.czechbattlefield.info (beralih ke Lampiran)


javascript jquery css html-table
person Johncze    schedule 26.12.2012    source sumber
comment
Bagaimana cara kerja pemfilteran setelahnya?   -  person Alexander    schedule 27.12.2012
comment
Saya tidak mengerti, Anda hanya ingin menampilkan item berbeda di tabel Anda?   -  person Pedro Estrada    schedule 27.12.2012
comment
Ikon-ikon tersebut terlihat melakukan hal-hal unik - apa yang terjadi pada ikon tersebut saat Anda menciutkan baris Anda...?   -  person Sampson    schedule 27.12.2012
comment
Saya yakin maksud Anda rowspan.   -  person Shmiddty    schedule 27.12.2012
comment
Tunjukkan kepada kami kode yang Anda gunakan untuk memfilter tabel. Tentu saja skrip spaninng sel perlu diintegrasikan di dalamnya. Tunjukkan kepada kami bagaimana Anda mencoba menggunakan skrip yang Anda temukan.   -  person Bergi    schedule 27.12.2012
comment
dimana kodemu? letakkan kode Anda di jsfiddle atau codepen   -  person Ji_in_coding    schedule 25.10.2016

Jawaban (1)


arrow_upward
2
arrow_downward

Saya menulis contoh bagaimana cara memperluas tabel apa pun menggunakan jquery.

Perhatikan bahwa kode ini hanya berfungsi dengan 1 asumsi: Kolom yang ingin Anda rentangkan barisnya DISORTING

Anda dapat memainkannya di Codepen (coba edit 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