如何动态使用jquery设置colspan？ [英] How to set colspan dynamically using jquery?

问题描述

你好我正在显示时间表。我想动态地将colspan添加到包含字符串Lab的元素。该表存储在数据库中，如下所示： - $ /

Hi i am displaying time tables. I want to add colspan dynamically to an element which contains string Lab. The table stored in database as follow:-

----------------------------------------------------------------------------------
|    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或任何其他技术的方法。

So when the table is displayed in the application i want to colspan the lab entry so that it display in 2-3 and 3-4. I am unable to think of a way to do it. Kindly please provide a way to do it with javascript/jquery or any other technique.

表格显示代码： - $ /

Table Display Code:-

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

推荐答案

您可以尝试如下所示：

$('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 单元格。

This iterates through each <td>. If LAB is found in the HTML contents of this cell apply the attribute colspan. and delete the next cell which should be blank. This is done because we are simply expanding the current cell across 2 columns, not overriding the next cells data, which creates an "extra" td cell.

JSFiddle

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

Note: This assumes the length of a Lab session is fixed at 2 hours long.

这篇关于如何动态使用jquery设置colspan？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！