...

View Full Version : hi,Help me : How to assign css class to Table rows dynamically



vinodh_v_p
06-11-2008, 12:58 PM
I am totally new to javascript.Please help me resolve the following javascript problem.I am having a table which has 10 rows.Each row has 3 td's.
While loading the page I want to assign two different css classes to these table rows alternatively.That is for the first row "class1" second row "class2", third row again "class1" 4ht row "class2" and so on.But the problem i am facing is that in these rows,some of the rows i will be hiding and showing depending on values in some td's.
ie.for example 4th row contains a drop down box.So if the user selects a particular value from the drop down box , I will show or hide the 5 th row.I am able to hide and show the tr's.But then the classses assigned to each row alternatively breaks down.When i hide 5th row, then 4th row and 6 th rows are having the same classes.I want 5th row as "class1" and 6 th row as "class2" when 5th row is "hidden".But when 5 th row is displayed 4t row should have "class1" 5th row "class2" 6 th row "class1" etc..
Can any body give me code for getting the tr's from the table and assign classes to these tr's dynamically?

Kor
06-11-2008, 01:15 PM
function zebra(tableid){//tableid = the id of the table
var cn=['class1','class2'];//classes
var rows=document.getElementById(tableid).getElementsByTagName('tr'), i=0,r;
while(r=rows[i++]){
r.className=cn[(i-1)%2];
}
}

vinodh_v_p
06-12-2008, 08:58 AM
Hi,
Thanks for the reply.But i think my requirement is a little different.Actually I want to assign the classes while the user selects a value from a select box.(When the user selects some particular values from the select box,I am hiding some Table Rows.So the existing classes needs to be reassigned.)
I changed the code as below and it is working now.thanks.
I am calling the below code in the onChange event of select box.
Here I am checking whether the particulkar TD is "Hidden" or not and if not hidden then only I am proceeding ..

var tablename = document.getElementById(tablename);

for (var j=0; j<rows.length; j++) {
cells=rows[j].getElementsByTagName("td");
for (var i=0; i<cells.length; i++) {
if(cells[i].style.display =='none'){

}else{
if(i==0){

cells = rows[j].getElementsByTagName("td");
for (var i=0; i<cells.length; i++) {
if(k==0){
cells[i].setAttribute("className"," ");
}else if(k&#37;2!=0){
cells[i].setAttribute("className","tablecontentGrey fSize80");
}else{
cells[i].setAttribute("className"," ");
}
}

k++;
}
}
}
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum