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  |      |
----------------------------------------------------------------------------------

因此，当表格显示在应用程序中时，我想要扫描实验室条目，使其显示在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。并删除应为空的下一个单元格。这样做是因为我们只是将当前单元格扩展到2列，而不是覆盖下一个单元格数据，这会创建一个“额外”td单元格。

JSFiddle

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

Answer 2

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

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

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

如何使用jquery动态设置colspan？

2 个答案: