How To Set Colspan Dynamically Using Jquery?

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

Solution 1:

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.

Solution 2:

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