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