javascript - How to set colspan dynamically using jquery? - Stack Overflow

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

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>

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

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>

• javascript
• php
• jquery
• html
• html-table

Share Improve this question Follow edited Mar 11, 2016 at 12:02 Kartikey Vishwakarma asked Mar 11, 2016 at 11:50 Kartikey VishwakarmaKartikey Vishwakarma 52933 gold badges99 silver badges1919 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You can try something like this:

$('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 
    }
});

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

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

you can use .attr() to set colspan dynamically

The :nth-child(n) selector selects all elements that are the nth child, regardless of type, of their parent.

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