Hemant Khandelwal, part of the CF Builder team posted this to the CF Builder blog: Code Name: Twister

If there's a pet bug that you'd like to see fixed, post it here

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


});

We've all found a billion ways to achieve some kind of alternating event in our websites, whether it's alternating row colors, content or a myriad of other things..

In the ColdFusion world we use the CF Mod() function alot.. but did you know how much overhead it actually creates? For each iteration it must divide the numbers in question and look at the remainder. Based on that remainder the Mod is either odd or even...

but..

I stumbled on to a better way, ColdFusion has a function called BitAnd(), instead of dividing numbers this works at the bit level and it's substantially faster:

Ben Nadel does a great overview here: http://www.bennadel.com/blog/668-Using-BitAnd-To-Determine-Odd-Even-Rows-Thanks-Tony-Petruzzi-.htm.

I've found a significant performance increase, especially with large data outputs needing alternating something..