How to highlight rows on link click?

**AHA7** · May 23, 2007 23:34

Hello,

I have an HTML table with many rows and columns with each row containing info about one specific item and a delete link (there is a delete link for each row). What I want to do is to highlight the whole row (<tr> element) in the table (with a different background color) when I click on the delete link of that row (the new page opens in a new window.)

My question is:
How do I highlight (by changing the bg color for the whole <tr> element or -if that's not possible- all of that row's <td> elements) the row if I have clicked the delete link in that row. I want the row to stay highlighted so that I would know what rows were deleted.
I guess this'll require id-specific actions applied to the row <tr> or all of its cells with an onclick event in that rows delete link.

**bosko** · May 24, 2007 01:18

Try this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
function changeBgC(which) {
	document.getElementById(which).style.backgroundColor = 'yellow';
	}
</script>
</head>
<body>
<table border="1">
<tr id="fR">
	<td>blah</td>
	<td>blah</td>
	<td><a href="javascript:void(0);" onclick="changeBgC('fR')">Delete row</a></td>
</tr>
<tr id="sR">
	<td>blah</td>
	<td>blah</td>
	<td><a href="javascript:void(0);" onclick="changeBgC('sR')">Delete row</a></td>
</tr>
</table>
</body>
</html>

**Azmeen** · May 24, 2007 01:23

My slightly different method:

HTML Code:

<html>
<head>
<title>Test</title>
<style type="text/css">
#thetable tr {
	background-color: #00ff00;
}
</style>
<script type="text/javascript">
function hiliteme(therow) {
	theelem = document.getElementById(therow);
	theelem.style.backgroundColor = "#ff0000";
	alert('Row ' + therow + ' should be red now');
	theelem.style.backgroundColor = "#00ff00";
}
</script>
</head>
<body>
<table id="thetable">
<tr id="row1">
<td>Some stuff</td><td>More Stuff</td><td><a href="#row1" onclick="hiliteme('row1')">[Del]</a></td>
</tr>
<tr id="row2">
<td>Some stuff</td><td>More Stuff</td><td><a href="#row2" onclick="hiliteme('row2')">[Del]</a></td>
</tr>
<tr id="row3">
<td>Some stuff</td><td>More Stuff</td><td><a href="#row3" onclick="hiliteme('row3')">[Del]</a></td>
</tr>
</table>
</body>
</html>

**AHA7** · May 24, 2007 01:29

EDIT: Thanks Azmeen, bosko! I was on the reply page for a while and didn't notice your replies!

Just found it!

Hope someone finds it useful.

HTML Code:

<html>
<head>
<script type="text/javascript">
function visited(a) {
  tr = a.parentNode.parentNode;
  tr.style.backgroundColor = "red";
}
</script>
</head>
<body>
<table>
 <tr>
  <td>This row will be highlighted in red after you...</td>
  <td>Click on the following link</td>
  <td><a href="http://google.com" target="_blank" onclick="visited(this)">Google</a></td>
 </tr>
</table>
</body>
</html>

User Tag List

Thread: How to highlight rows on link click?

Thread Tools

Display

How to highlight rows on link click?

Bookmarks

Bookmarks

Posting Permissions