JQuery: Объединить столбец таблицы

Я хочу объединить ячейки последнего столбца таблицы из двух рядом друг от друга имеют один и тот же текст:JQuery: Объединить столбец таблицы

У меня есть этот код, но он проверить клетки строки рядом друг с другом:

<script language="javascript" type="text/javascript"> 
    $(document).ready(function() { 

     $('#sample_1 tbody tr:nth-child(4) td:nth-child(4)').each(function(){ 
      alert($(this).text()); 

      var colSpan=1; 
      while($(this).text() == $(this).next().text()){ 

       $(this).next().remove(); 
       colSpan++; 
      } 
      $(this).attr('colSpan',colSpan); 
     }); 
    }); 
</script>

Этот исходный код таблицы HTML:

<table class="table table-striped table-bordered dataTable TF" id="sample_1" aria-describedby="sample_1_info"> 
    <tbody role="alert" aria-live="polite" aria-relevant="all"> 
     <tr class="fltrow"> 
      <td colspan="4"> 
       <input id="flt0_sample_1" type="text" ct="0" class="single_flt"> 
      </td> 
     </tr> 
     <tr class="gradeX odd"> 
     </tr> 
     <tr role="row"> 
      <th class="sorting" role="columnheader" tabindex="0" aria-controls="sample_1" rowspan="1" colspan="1" aria-label="Username: activate to sort column ascending" style="width: 231px;">Nom</th> 
      <th class="sorting" role="columnheader" tabindex="0" aria-controls="sample_1" rowspan="1" colspan="1" aria-label="Username: activate to sort column ascending" style="width: 231px;">Prénom</th> 
      <th class="sorting" role="columnheader" tabindex="0" aria-controls="sample_1" rowspan="1" colspan="1" aria-label="Username: activate to sort column ascending" style="width: 231px;">Numéro Teléphone</th> 
      <th class="sorting" role="columnheader" tabindex="0" aria-controls="sample_1" rowspan="1" colspan="1" aria-label="Username: activate to sort column ascending" style="width: 231px;">heure de rdv</th> 
     </tr> 
     <tr role="row"> 
      <td class="hidden-phone "> 
       MOSTEFAOui              
      </td> 
      <td class="hidden-phone "> 
       MAiNE              
      </td> 
      <td class="hidden-phone "> 
       0555122844              
      </td> 
      <td class="hidden-phone " colspan="1"> 
       09:00              
      </td> 
     </tr> 
     <tr role="row"> 
      <td class="hidden-phone "> 
       ADJOUT              
      </td> 
      <td class="hidden-phone "> 
       ABDELKADER             
      </td> 

      <td class="hidden-phone "> 
       0775522355             
      </td> 
      <td class="hidden-phone "> 
       10:00             
      </td> 
     </tr> 
     <tr role="row"> 
      <td class="hidden-phone "> 
       SANAD             
      </td> 
      <td class="hidden-phone "> 
       MILOUD              
      </td> 

      <td class="hidden-phone "> 
       0661225412              
      </td> 
      <td class="hidden-phone "> 
       10:00              
      </td> 
     </tr> 
     <tr role="row"> 
      <td class="hidden-phone "> 
       ACHAOUR             
      </td> 
      <td class="hidden-phone "> 
       MOHAMED              
      </td> 

      <td class="hidden-phone "> 
       0555122265              
      </td> 
      <td class="hidden-phone "> 
       10:00              
      </td> 
     </tr> 
     <tr role="row"> 
      <td class="hidden-phone "> 
       TARFAUI              
      </td> 
      <td class="hidden-phone "> 
       MORAD              
      </td> 

      <td class="hidden-phone "> 
       0788745211             
      </td> 
      <td class="hidden-phone "> 
       10:00             
      </td> 
     </tr> 
     <tr role="row"> 
      <td class="hidden-phone "> 
       TANEM              
      </td> 
      <td class="hidden-phone "> 
       LAKHDAR              
      </td> 

      <td class="hidden-phone "> 
       0666115487              
      </td> 
      <td class="hidden-phone "> 
       11:00              
      </td> 
     </tr> 
    </tbody> 
</table>

источник

2015-12-08 Amine Mostefaoui

проводок также HTML вашей таблицы могли бы соблазнить нас, чтобы помочь вам , В любом случае, вы должны использовать rowspan, а не colspan, если вы хотите охватить ячейку по нескольким строкам. – wiredolphin

прямо сейчас я хочу, чтобы цикл через столбцы прямо сейчас, когда я использую alert на $ this.text и $ this.next(). Text() он показывает, например, Mostefaoui, затем Maine, и я хочу показать MOSTEFAOUI и Adjout следующую строку –

, может быть, я понимаю неправильно, но почему у вас есть 'tr: nth-child (4)'? Кажется, вам нужен селектор, подобный этому '$ ('# sample_1 tbody tr td: nth-child (4)')' –

Не самое элегантное решение, но оно работает.

Я добавил класс в 4-й колонке под названием «Heure»

<td class="heure">11:00</td>

и следующие изменения в вашем JS

<script language="javascript" type="text/javascript"> 
    $(document).ready(function() { 

     var topMatchTd; 
     var previousValue = ""; 
     var rowSpan = 1; 

     $('.heure').each(function(){ 

      if($(this).text() == previousValue) 
      { 
       rowSpan++; 
       $(topMatchTd).attr('rowspan',rowSpan); 
       $(this).remove(); 
      } 
      else 
      { 
       topMatchTd = $(this); 
       rowSpan = 1; 
      } 

      previousValue = $(this).text(); 
     }); 
    }); 
</script>

источник

2015-12-08 16:21:27

он отлично работает, ... Спасибо! –

JQuery: Объединить столбец таблицы

ответ

Смежные вопросы