OnMouseOver - TR Background-color

[AndieB]

Hello all,

perhaps someone of you are able to provide me with a solution.

I'm having a TABLE which is created when I'm querying a database. The result is displayed in the TABLE. Now, the thing is that I want people to be able to get more details about the "displayed" information by clicking a ROW ([i]the TR in the table[/i]) in the table, no matter in which TD they click.

Also I want the ROW ([i]TR[/i]) to change background-color when I put the mousepointer over a ROW, to show that is being selected. I do not want to use the <a href...> tag, I want to use: onMouseOver and onClick...

Anyone knows HOW I should code this??

Thank you in advance for any kind of help!!

Sincerely,
Andreas

[tomfmason]

Not sure if it would validate but maybe you could place a div tag around the tr..?

[KevinM1]

[quote author=AndieB link=topic=113967.msg463508#msg463508 date=1162799478]
Hello all,

perhaps someone of you are able to provide me with a solution.

I'm having a TABLE which is created when I'm querying a database. The result is displayed in the TABLE. Now, the thing is that I want people to be able to get more details about the "displayed" information by clicking a ROW ([i]the TR in the table[/i]) in the table, no matter in which TD they click.

Also I want the ROW ([i]TR[/i]) to change background-color when I put the mousepointer over a ROW, to show that is being selected. I do not want to use the <a href...> tag, I want to use: onMouseOver and onClick...

Anyone knows HOW I should code this??

Thank you in advance for any kind of help!!

Sincerely,
Andreas
[/quote]

Well, if those table rows are the only ones in your html, you could do something along the lines of:

[code]
var rows = document.getElementsByTagName('tr');

for(var i = 0; i < rows.length; i++){
   rows[i].onmouseover = mouseOverFunction;
   rows[i].onmouseout = mouseOutFunction; //you probably don't want the row to stay highlighted if the mouse isn't hovering over it
   rows[i].onclick = mouseClickFunction;
}
[/code]

If you have multiple tables, you can still do the same thing, with an extra step:

[code]
var table = document.getElementById('tableId');
var rows = table.getElementsByTagName('tr');

for(var i = 0; i < rows.length; i++){
   rows[i].onmouseover = mouseOverFunction;
   rows[i].onmouseout = mouseOutFunction;
   rows[i].onclick = mouseClickFunction;
}
[/code]

I'm not 100% sure about what you want to have displayed when a user clicks on a row, but changing the background color is pretty easy:

[code]
function mouseOverFunction(evt){
   evt = (evt) ? evt : ((event) ? event : NULL);

   if(evt){
      var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : NULL);

      if(elem){
         elem.style.backgroundColor = 'red';
      }
   }
}

function mouseOutFunction(evt){
   evt = (evt) ? evt : ((event) ? event : NULL);

   if(evt){
      var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : NULL);

      if(elem){
         elem.style.backgroundColor = 'blue';
      }
   }
}
[/code]

Keep in mind that the event handler function names are intentionally generic...you probably shouldn't name them the way I have.

EDIT: fixed the last two functions as I forgot about handling the event...d'oh!

[fenway]

Yes, unfortunately, there's no easier way to get all of the cells to change in unison -- rows aren't fun to work with.