Results 1 to 2 of 2

Thread: want to have alternate color change for table rows

  1. #1
    Join Date
    Sep 2004
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default want to have alternate color change for table rows

    I am using following code which allows me to change bg color of the clicked row, but and i want to change the bgcolor back to original of the previous clicked row

    how do i go abt it

    Sameer

    =====================
    <style>
    .td1 { background-color: #990000;color : #ffffff; }
    .td2 { background-color: #ffffcc;color : #336699; }
    </style>

    <table width=200 border=1>
    <tr id="t1" class=td1 onClick=javascript:callme('t1')><td>some text</td><tr>
    <tr id="t2" class=td1 onClick=javascript:callme('t2')><td>some text</td><tr>
    <tr id="t3" class=td1 onClick=javascript:callme('t3')><td>some text</td><tr>
    <tr id="t4" class=td1 onClick=javascript:callme('t4')><td>some text</td><tr>
    </table>

    <script language=javascript>
    function callme(rno)
    {
    var tmp = document.getElementById(rno);
    tmp.className='td2'
    }
    </script>

  2. #2
    Join Date
    Dec 2004
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post

    The easiest way to do this would be to loop through all of the table rows and change each one's class. You should rewrite the function so it looks like this:

    Code:
    function callme(rno) {
    for (i=1;i<=4;i++) {
    document.getElementById('t'+i).className='td1';
    }
    var tmp = document.getElementById(rno); 
    tmp.className='td2';
    }
    You could do it manually, but looping is easier. (I would also recommend rewriting the XHTML so it meets standards.)

Bookmarks

Posting Permissions

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