如何使用jquery动态设置colspan？答案

【问题标题】：How to set colspan dynamically using jquery?如何使用jquery动态设置colspan？
【发布时间】：2016-06-26 15:48:07
【问题描述】：

您好，我正在显示时间表。我想将 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  |      |
----------------------------------------------------------------------------------

因此，当表格显示在应用程序中时，我想合并实验室条目，以便它显示在 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>

【问题讨论】：

标签： javascript php jquery html html-table

【解决方案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。并删除下一个应该为空白的单元格。这样做是因为我们只是将当前单元格扩展到 2 列，而不是覆盖下一个单元格数据，这会创建一个“额外的”td 单元格。

JSFiddle

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

【讨论】：

@KartikeyVishwakarma 我还是不明白你到底想要什么？ :O
@PraveenKumar - 基本上，如果一个表格单元格中有Lab，让它跨越2个<td>s，因为“实验室”会话持续2小时。看看小提琴......它给出了之前和之后的表示。
@ImClarky 感谢您的澄清。 :)

【解决方案2】：

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

:nth-child(n) 选择器选择所有属于其父级的第 n 个子级的元素，无论其类型如何。

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

【讨论】：

不会让每个元素都出现在 colspan 中。如果那里没有实验室入口但在其他地方怎么办。