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

JavaScript
1

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.


<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 :stuck_out_tongue:

2

nextSibling will usually point to a text node, so you must scan for an exact nodeName match:

<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>
3

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


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:


nextElement(this, function (el) {
    el.style.background = '#ff88ff';
});
4

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


<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?

5

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.

6

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)

7

Instead of setting the style, use a class instead so that you can use CSS to more effectively target the effect.

8

Do you mean kind of like .classname :hover ? That might work, I’ll have to try on monday.

9

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.

10

It works now, I use the javascript for the inner table and CSS pseudo class :hover for the exterior.