SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Nov 2006
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How? tr.this.style = xxx & the do this to the next tr

    Sorry about the title I didn't quite know how to form my question.

    I am changing the style of a table row with Javascript on mouseover and I want it to also change the style of the next row that follows as well.

    HTML Code:
    <table>
      <tr							   
          onmouseover="this.style.background='#ff88ff';
          this.nextSibling.background='ffff99';
          this.style.cursor='pointer'"
          onmouseout ="this.style.background='#ffffff';"
          onclick    ="click2(event)"
      >
            <td>A</td>	
            <td>B</td>	
            <td>C</td>	
            <td>D</td>	
            <td>E</td>	
            <td>F</td>	
     </tr>
    
     <tr>
          <td colspan="6">NOTES Blah Blah Blah</td>
      </tr>
    </table>
    I should also note that javascript is not one of my strengths :P
    Please...Never describe anything to me using foo and bar.

  2. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nextSibling will usually point to a text node, so you must scan for an exact nodeName match:
    Code:
    <table>
      <tr							   
          onmouseover="this.style.background = '#ff88ff'; getNextSibling( this ).style.background = '#ffff99';
    this.style.cursor='pointer'"
          onmouseout ="this.style.background='#ffffff'; getNextSibling( this ).style.background = ''"
          onclick    ="click2(event)"
      >
            <td>A</td>	
            <td>B</td>	
            <td>C</td>	
            <td>D</td>	
            <td>E</td>	
            <td>F</td>	
     </tr>
     <tr>
          <td colspan="6">NOTES Blah Blah Blah</td>
      </tr>
    </table>
    
    <script type = "text/javascript">
    
    function getNextSibling( elem )
    {
     var ns = elem, found = false;
     
     while( !found && ( ns = ns.nextSibling ) )
      if( ns.nodeName == elem.nodeName )
       found = true; 
     
     return ns || { style:null };
    }
    
    </script>
    Tab-indentation is a crime against humanity.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Typically you would use scripting to walk the DOM to get to the next available element.

    For example, you could have a function called nextElement

    Code javascript:
    function nextElement(el, func) {
        while (el) {
            el = el.nextSibling;
            if (el.nodeType === 1) {
                break;
            }
        }
        func(el);
    }

    That way you can pass it a reference to the current tr, and it will find the next element and pass that to your func function.

    If the current tr is denoted by the this keyword, you might use:

    Code javascript:
    nextElement(this, function (el) {
        el.style.background = '#ff88ff';
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Addict
    Join Date
    Nov 2006
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This works perfectly, could I maybe throw a curve ball at you?

    I have some css which sets the background color, is there a way to have the javascript override this as the css prevents it from working if it is set?

    And is there a way to get that to work but for a child node, for example

    HTML Code:
    <table>
        <tr onmouseover="ChildElement(this, function (el) {el.style.background = '#ff88ff';});">
            <td></td>
            <td></td>
            <td></td>
            <td>
                <table> <-- This being the child
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                   </tr>
                   <tr>
                       <td colspan="3"></td>
                   </tr>
               </table>
            </td>
        </tr>
        
    
        
    </table>
    
    I think I'm over complicating things. I have a table embedded into a cell and when ever that row is selected it gets highlighted, but I don't want the nested table to change color, perhaps a simpiler way is available?
    Please...Never describe anything to me using foo and bar.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    If the CSS is setting the background color of the table element, you may have a better time of things by telling CSS to not color all tables, but only certain ones that you're interested in.

    If you can link to a test page on the web, we can see what we can do to help.
    Last edited by paul_wilkins; Feb 4, 2011 at 15:47.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Addict
    Join Date
    Nov 2006
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is an example of the code. When you hover over one of the big rows, everything turns yellow, I'ld like to prevent the inner table from changing.

    (Note: Refresh page after a while, the Onmouseout event prevents the error from occuring as much.)

    http://mallow.x10.mx/

    So earlier I said child but it is more like
    the
    from the tr -> the child's last sibling's child

    tr
    .| -> td_1 -> td_2
    .......................|-> table)
    Please...Never describe anything to me using foo and bar.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Instead of setting the style, use a class instead so that you can use CSS to more effectively target the effect.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Addict
    Join Date
    Nov 2006
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you mean kind of like .classname :hover ? That might work, I'll have to try on monday.
    Please...Never describe anything to me using foo and bar.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by prince_mallow View Post
    Do you mean kind of like .classname :hover ? That might work, I'll have to try on monday.
    Yep, because then you can use different CSS selectors, such as the immediate child selector, to ensure that the effect occurs to the top level, but not to lower levels.

    The good people in the CSS forum will be able to proivide much more details on the CSS side of things.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Addict
    Join Date
    Nov 2006
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works now, I use the javascript for the inner table and CSS pseudo class :hover for the exterior.
    Please...Never describe anything to me using foo and bar.


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
  •