Как установить colspan динамически с помощью jquery?

Question

Привет, я показываю таблицы времени. Я хочу добавить colspan динамически к элементу, который содержит строку Lab. В таблице хранится в базе данных следующим образом: -

---------------------------------------------------------------------------------- 
| Day | 9-10  | 10-11 | 11-12 | 12- 1| 1-2 | 2-3    | 3-4 | 
|--------------------------------------------------------------------------------- 
| Monday | DA601  | DA602 | DA603 |  |  | DA602 Lab/DA603 Lab |  | 
| Tuesday | DA601 Lab |  |  |  |  | DA602 Lab/DA603 Lab |  | 
---------------------------------------------------------------------------------- 

Итак, когда таблица отображается в приложении я хочу Colspan записи в лаборатории, так что она отображается в 2-3 и 3-4. Я не могу придумать, как это сделать. Пожалуйста, предоставьте способ сделать это с помощью javascript/jquery или любой другой техники.

Таблица дисплея Код: -

<table class="table table-bordered table-xxs"> 
    <thead> 
     <tr class="bg-info-600"> 
      <th>Day</th> 
      <th>9-10</th> 
      <th>10-11</th> 
      <th>11-12</th> 
      <th>12-1</th> 
      <th>1-2</th> 
      <th>2-3</th> 
      <th>3-4</th> 
     </tr> 
     </thead> 

     <tbody> 
     <?php 
      $sql="SELECT * FROM tt" ; 
      $results = $timetable->query($sql); 
      while($row = $results->fetch_assoc()) 
      { 
       echo '<tr>'; 
       echo "<td>{$row['day']}</td>"; 
       echo "<td>{$row['9-10']}</td>"; 
       echo "<td>{$row['10-11']}</td>"; 
       echo "<td>{$row['11-12']}</td>"; 
       echo "<td>{$row['12-1']}</td>"; 
       echo "<td>{$row['1-2']}</td>"; 
       echo "<td>{$row['2-3']}</td>"; 
       echo "<td>{$row['3-4']}</td>"; 
       echo '</tr>';      
      } 
     ?> 
     </tbody> 
    </table> 

Answer 1

Вы можете попробовать что-то вроде этого:

$('table tbody tr td').each(function(){ 
    var value = $(this).html(); 
    if(value.indexOf("LAB") !== -1){ //true 
     $(this).attr("colspan", 2); 
     $(this).next("td").remove(); // removes extra td 
    } 
}); 

Это перебирает <td>. Если LAB находится в содержимом HTML этой ячейки, примените атрибут colspan. и удалите следующую ячейку, которую должен быть пустым. Это делается потому, что мы просто расширяем текущую ячейку через 2 столбца, а не переопределяем следующие данные ячеек, что создает «лишнюю» ячейку td.

JSFiddle

Примечание: Это предполагает, что продолжительность сессии Lab фиксируется в 2-х часов долго.

Answer 2

вы можете использовать .attr() установить colspan динамически

Селектор :nth-child(n) выбирает все элементы, которые являются п-й ребенок, независимо от типа, их родителей.

$("table tr:nth-child(7)").attr('colspan',2);