Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Hightlight Table Row

Status
Not open for further replies.
sfalin

sfalin

Technical User
Joined
Aug 14, 2001
Messages
72
Location
US
<TR onmouseover=&quot;this.bgColor='#FFFF99'&quot; onmouseout=&quot;this.bgColor='#FFFFFF'&quot; onClick=&quot;bgColor='yellow';return false&quot;>

I have the above code in a row of a table. It works fine, but I want it, when clicked, to remember that color until another row in the table is clicked. I know why my code isn't working, it's the onMouseOver redoing the color.

Can anyone help me or point me in the right direction? Do I need to use a script of some sort?

 
Sort by date Sort by votes
hi

read this thread

thread215-588903

pgtek

 
Upvote 0 Downvote
You're looking for a 3-state function... OFF, ON, and CLICKED... with behaviours determined by the items previous state.

To do so, you've gotta keep track of WHICH ROW is currently the &quot;CLICK&quot; row. When a different row is clicked, you've gotta update the variable and set the backgrounds appropriately.

If the &quot;CLICK&quot; is moused-over, you still want to hilite it, but when it's moused-out, you wan't to return to the &quot;CLICKED&quot; state.

Here's a code snippet that should do something similar to what you're looking for. Note: I may have screwed up the javascript property name for &quot;backgroundColor&quot; (is it style.bgColor?). You can fiddle with that.

Also, be sure that each ROW has a unique id... it can be anything, so long as it's unique.

Code: 
<script type=&quot;text/javascript&quot; language=&quot;javascript&quot;>
var hiRow = 'no row hilited';
function setHilite(rowID) {
  if (rowNum == hiRow) return false;
  var oldRow = document.getElementById(hiRow).style;
  var theRow = document.getElementById(rowID).style;
  oldRow.backgroundColor = '#ffffff';  
  theRow.backgroundColor = '#ffff00';
  hiRow = rowID;
}
function toggleColor(rowID, how) { // 'how' should be 'on' or 'off'
  var theRow = document.getElementById(rowID).style;
  if (how == 'on') {
    theRow.backgroundColor = '#ff0000';
  } else {
    theRow.backgroundColor = (rowID == hiRow) ? '#ffff00':'#ffffff';
  }
}
</script>

<table>
  <tr id=&quot;row1&quot; onmouseover=&quot;toggleColor(this.id,'on');&quot; onmouseout=&quot;toggleColor(this.id,'off');&quot; onclick=&quot;setHilite(this.id);&quot;>
    <td>hello</td>
  </tr>
  <tr id=&quot;row2&quot; onmouseover=&quot;toggleColor(this.id,'on');&quot; onmouseout=&quot;toggleColor(this.id,'off');&quot; onclick=&quot;setHilite(this.id);&quot;>
    <td>good-bye</td>
  </tr>
...more rows, with unique id's, etc etc etc

</table>
 
Upvote 0 Downvote
D'oh!

I just got around to testing that code... and found 3 errors. Dang. The following code works:

Code: 
<html><head>
<script type=&quot;text/javascript&quot; language=&quot;javascript&quot;>
var hiRow = '';
function setHilite(rowID) {
  if (rowID == hiRow) return false;
  var oldRow = (hiRow == '') ? null:document.getElementById(hiRow).style;
  var theRow = document.getElementById(rowID).style;
  if (oldRow != null) {oldRow.backgroundColor = '#ffffff'};  
  theRow.backgroundColor = '#ffff00';
  hiRow = rowID;
}
function toggleColor(rowID, how) { // 'how' should be 'on' or 'off'
  var theRow = document.getElementById(rowID).style;
  if (how == 'on') {
    theRow.backgroundColor = '#ff0000';
  } else {
    theRow.backgroundColor = (rowID == hiRow) ? '#ffff00':'#ffffff';
  }
}
</script>
<style type=&quot;text/css&quot;>
td {cursor: hand;}
</style>
</head>
<body>
<table>
  <tr id=&quot;row1&quot; onmouseover=&quot;toggleColor(this.id,'on');&quot; onmouseout=&quot;toggleColor(this.id,'off');&quot; onclick=&quot;setHilite(this.id);&quot;>
    <td>hello</td>
  </tr>
  <tr id=&quot;row2&quot; onmouseover=&quot;toggleColor(this.id,'on');&quot; onmouseout=&quot;toggleColor(this.id,'off');&quot; onclick=&quot;setHilite(this.id);&quot;>
    <td>good-bye</td>
  </tr>
  <tr id=&quot;row3&quot; onmouseover=&quot;toggleColor(this.id,'on');&quot; onmouseout=&quot;toggleColor(this.id,'off');&quot; onclick=&quot;setHilite(this.id);&quot;>
    <td>good-bye</td>
  </tr>
  <tr id=&quot;row4&quot; onmouseover=&quot;toggleColor(this.id,'on');&quot; onmouseout=&quot;toggleColor(this.id,'off');&quot; onclick=&quot;setHilite(this.id);&quot;>
    <td>good-bye</td>
  </tr>
  <tr id=&quot;row5&quot; onmouseover=&quot;toggleColor(this.id,'on');&quot; onmouseout=&quot;toggleColor(this.id,'off');&quot; onclick=&quot;setHilite(this.id);&quot;>
    <td>good-bye</td>
  </tr>
  <tr id=&quot;row6&quot; onmouseover=&quot;toggleColor(this.id,'on');&quot; onmouseout=&quot;toggleColor(this.id,'off');&quot; onclick=&quot;setHilite(this.id);&quot;>
    <td>good-bye</td>
  </tr>
</table>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question Question
Display table td's as block element on mobile phone
Replies
3
Views
2K
spamjim
spamjim
ashokkumary
  • Locked
  • Question Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
383
spamjim
spamjim
PeDa
  • Locked
  • Question Question
Table not formatted correctly in all browsers
Replies
2
Views
494
PeDa
PeDa
lupidol
  • Locked
  • Question Question
Table's title row's rounded corners border
Replies
2
Views
415
lupidol
lupidol
PSchubert
  • Locked
  • Question Question
Data in db table cell not displayed in asp table cell -- a CSS issue?
Replies
2
Views
354
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top