Classes (1)  /  ColdFusion (14)  /  ColdFusion Jobs (2)  /  General (6)  /  JQuery (7)  /  Quick and Dirty (3)  / 
Search Blog

 

Archives
RSS

 

 

 

Adobe Community Expert in ColdFusion

 

Adobe Ceritfied Instructor

 

CTT+ Certified Technical Trainer

 

Hosted By:

Alurium Hosting

Powered by BlogCFM v1.14

17 November 2011
Dynamic colspans with jQuery
making sure that dynamic columns don't break a table structure

If you've ever had to create forms that have a user-clonable rows or columns you've probably had to figure out how to change column or row spanning, here's a quick run through of how I did i with jQuery.

The requirement: Click an element and add a column to a table, the table happens to be a form.

First: capture the click event, the form is part of a larger Ajax feature so I'm using the "live" method to keep the reuqest alive

$('#addFlight').live('click', function(event){

});

Inside of this function, we need to get the current value of the "colspan" attribute of the cell in question, using the jQuery .attr() function.

/* get the current colspan value from the row containing the segment info */
var cSpanL = $('td.depFormTitleTop').attr('colspan');

We're adding one column at a time so we can add one to the value and get away with it

/* add 1 to it */
cSpanL = cSpanL + 1

One of the other things that .attr() can do is update existing attributes, so we'll use the variable we created above

/*update the colspan value and we have a dynamic columnspan*/
$('td.depFormTitleTop').attr('colspan', cSpanL);

and voila, a dynamic colspan attribute that updates when we add a column.

To complete the requirement we need to do the actual column add, there's a couple of things to point out:

  • I'm using X-Path to find any table row inside of my table(id="departureGridTable") that contains the word "week".
  • Secondly I'm using chaining to grab the last cell in a particular row, clone it and append it into the new column

So here we go:

First, we need to find the rows in question, regardless of how many their are and loop over them, jQuery can do for each loops with the each() function.

$('#departureGridTable tr[id~="week"]').each(function(){

});

Then we grab the last existing cell in the row, clone it and append it to the row

$(this).append($(this).children().last().clone());

$(this) refers to the row that were dealing with through each iteration

/* find the last flight number cell, clone it and append it to the flight number row*/
$('#departureGridTable tr[id~="week"]').each(function(){

})

Similarly we can now populate the cells in the column

/* clone the flight status drop down for each row sun - sat*/
$('[data-spack]').each(function(){
var dCell = $('td:last', this).clone();
$(this).append(dCell);
});

If you're wondering what this is: $('[data-spack]'). JQuery allows you to use HTML 5 'data-' elements. I use them all over the place as a data transport mechanism.

The complete code looks like this:

$('#addFlight').live('click', function(event){

/* get the current colspan value from the row containing the segment info */
var cSpanL = $('td.depFormTitleTop').attr('colspan');

/* add 1 to it */
cSpanL = cSpanL + 1

/*update the colspan value and we have a dynamic columnspan*/
$('td.depFormTitleTop').attr('colspan', cSpanL);

/* find the last flight number cell, clone it and append it to the flight number row*/
$('#departureGridTable tr[id~="week"]').each(function(){
$(this).append($(this).children().last().clone());
})

/* clone the flight status drop down for each row sun - sat*/
$('[data-spack]').each(function(){
var dCell = $('td:last', this).clone();
$(this).append(dCell);
});


});




Posted by admin at 10:10 AM | Link | 0 comments

No comments found.

Commenting has been disabled for this entry.

 

© 2011 Scott Stewart / SSTWebworks
Design by Contented Designs