如何使用jquery动态设置colspan？

Question

嗨，我正在展示时间表。我想将colspan动态添加到包含string 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  |      |
----------------------------------------------------------------------------------

因此，当表格在应用程序中显示时，我希望合并实验室条目，使其以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>。如果在该单元格的HTML内容中找到LAB，则应用属性colspan。并删除应为空的下一个单元格。这样做是因为我们只是将当前单元格扩展到两列，而不是覆盖下一个单元格数据，这会创建一个“额外的”td单元格。

JSFiddle

注意：假设实验会话的长度固定为2小时。

Answer 2

您可以使用.attr()动态设置colspan

:nth-child(n)选择器选择作为父元素的第n个子元素的所有元素，而不考虑其类型。

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