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 Chris 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
Aug 14, 2001
72
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
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
Display table td's as block element on mobile phone 1
Replies
3
Views
911
spamjim
spamjim
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
167
spamjim
spamjim
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
172
PeDa
PeDa
lupidol
  • Locked
  • Question
Table's title row's rounded corners border 1
Replies
2
Views
176
lupidol
lupidol
PSchubert
  • Locked
  • Question
Data in db table cell not displayed in asp table cell -- a CSS issue?
Replies
2
Views
145
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top