Results 1 to 5 of 5

Thread: Change border color of table for current row only

  1. #1
    Join Date
    Dec 2007
    Posts
    88
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Change border color of table for current row only

    Hi, need help please!

    I have a table within a table, the background color of table is blue to match the background color of my <td>.

    but now i want onmouseover to change the background color of the <td> which i do but the row in between the colommns have a blue color.

    <tr class="tbDetailNew">
    <td width="8%">&#160;</td>
    <td colspan="6">
    <table id="test" style="border:none; backgound-color:blue;" width='100%'>
    <tr>
    <td onmousemove="style.backgroundColor = 'white';"document.getElementById('test').style.backgroundColor = 'white';">

    i get it to change the table backgound color but then it changes for all the rows within the table - i just want to the row i'm on.

    Please Assist.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Code:
    <td onmousemove="style.backgroundColor = 'white';"document.getElementById('test').style.backgroundColor = 'white';">
    The highlighted should be:
    this.style.backgroundColor
    And what element has the ID test?
    [edit]
    If I understand what you want, I think this should work:
    Code:
    <script type="text/javascript">
    var trRows = function(e){
        var el = document.getElementById(e);
        var tr = el.getElementsByTagName('tr');
        for(i=0,color=new Array();i<tr.length;++i){
          tr[i]["onmouseover"] = function() { this.style.backgroundColor = "yellow"; };
          tr[i]["onmouseout"] = function() { this.style.backgroundColor = "#FFF"; };
        }
    }
    </script>
    <table id="hovTable" border="1">
    <tr><td>Array1</td><td>Dog</td><td>Cat</td><td>Horse</td></tr>
    <tr><td>Array2</td><td>Ferrari</td><td>Mustang</td><td>Hummer</td></tr>
    <tr><td>Array3</td><td>Clouds</td><td>Sun</td><td>Stars</td></tr>
    <tr><td>Array4</td><td>Orange</td><td>Apple</td><td>Banana</td></tr>
    </table>
    <script type="text/javascript">
    window.onload = trRows('hovTable');
    </script>
    Although if you give a tr a bg color, it won't return. If your giving your tr[s] bg colors that are different then all the other tr[s], then tell me and I'll make it happen.
    Last edited by Nile; 10-22-2008 at 03:42 AM.
    Jeremy | jfein.net

  3. #3
    Join Date
    Dec 2007
    Posts
    88
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Thank You

    Thank You for the assist.

    It's not more of a javascript but a css.

    when I'm on the row I change the td & the table background color.
    which works - but then all the other rows have a different backgroundcolor because i changed it on the current row. But now all the other rwos have blue td with thin strips of black showing from the table color change.

    Regards

  4. #4
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    If you want it for css. Just take a look at some tutorials. I don't understand the last part you were saying in the post above...
    Jeremy | jfein.net

  5. #5
    Join Date
    Dec 2007
    Posts
    88
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Apologies

    Thank you - and my apologies.

    As I know what i'm doing but explainng what i'm doing is a week point of mine.

    Thank You - i dropped the table - so don't need to change the color as i'm pressured on time.

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
  •