Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile hi,Help me : How to assign css class to Table rows dynamically

    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?

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Code:
    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];
    }
    }
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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++;
    }
    }
    }
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •