highlighting row 1

TheConeHead · May 10, 2005

Is there a way to click on a cell and have the whole row highlighted (ie change bgcolor) ... I know, I know you hate tables, but that is how I am doing it...

[conehead]

stormbind · May 10, 2005

Obviously this is incomplete, but it demonstrates the solution.

Code:

<tr>
<td onclick="this.parentElement.style.backgroundColor='green';">
hello world
</td>
</tr>

--Glen

Memoria mihi benigna erit qui eam perscribam

kaht · May 10, 2005

AFAIK not with CSS, here's the javascript solution:

Code:

<html>
<head>
<script language=javascript>

function highlightRow(obj) {
   var rowObj = obj.parentNode;
   for (i = 0; i < rowObj.childNodes.length; i++) {
      rowObj.childNodes[i].style.backgroundColor = '#ffff00';
   }
}

</script>
</head>

<body>
<table border=1>
<tr><td onclick="highlightRow(this)">this</td><td onclick="highlightRow(this)">is</td><td onclick="highlightRow(this)">row</td><td onclick="highlightRow(this)">one</td></tr>
<tr><td onclick="highlightRow(this)">this</td><td onclick="highlightRow(this)">is</td><td onclick="highlightRow(this)">row</td><td onclick="highlightRow(this)">two</td></tr>
<tr><td onclick="highlightRow(this)">this</td><td onclick="highlightRow(this)">is</td><td onclick="highlightRow(this)">row</td><td onclick="highlightRow(this)">three</td></tr>
<tr><td onclick="highlightRow(this)">this</td><td onclick="highlightRow(this)">is</td><td onclick="highlightRow(this)">row</td><td onclick="highlightRow(this)">four</td></tr>
</table>
</body>
</html>

Since you haven't specified when you want a row to become unhighlighted, I only provided a solution to highlight the row. However, using the same code it shouldn't be a problem to set them back to a white background (or whatever other color you're using)

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.
[banghead]

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!

highlighting row 1

TheConeHead

Programmer

stormbind

Technical User

kaht

Programmer

Similar threads

Part and Inventory Search

Sponsor