how to highlight a table row
-
I have a member management page. It displays a table of a list of members generated automatically from a recordset. Each member record is a row in the table, and each row has a radio button.
What I want to do is to highlight the row that is selected. I want to change the color of the TD background that with the selected radio button. How do I do this?? I know Hotmail has it done, because each time you click a checkbox beside a message, the row's bgcolor gets changed to a different color. Thanks. -
Here's a basic way to do it. Works only in IE4+ and maybe NS6. Same goes for Hotmail, btw.
<HTML>
<HEAD>
<TITLE></TITLE>
<style type="text/css">
td {
cursor: default
}
</style>
</HEAD>
<BODY>
<table id=Table1 onclick="getRow()" border="1">
<tr>
<td>
<input type="checkbox" value="" />
</td>
<td>
Cell one
</td>
<td>
Cell two
</td>
<td>
Cell three
</td>
</tr>
<tr>
<td>
<input type="checkbox" value="" />
</td>
<td>
Cell one
</td>
<td>
Cell two
</td>
<td>
Cell three
</td>
</tr>
</table>
<script>
function getRow(){
var el = event.srcElement
var rowIdx = 0
var tbl = null
var oRow = null
if (el.tagName =="INPUT"){
rowIdx = el.parentElement.parentElement.rowIndex
tbl = document.getElementById("Table1")
oRow = tbl.rows[rowIdx]
if (eval(el.getAttribute("checked"))){
colorCells(oRow, "khaki") // or whatever color
}
else{
colorCells(oRow, "white")
}
}
}
function colorCells(oRow, color){
var cell = null
for(x=0;x<oRow.cells.length;x++){
cell = oRow.cells[x]
cell.bgColor = color
}
}
</script>
</BODY>
</HTML>
Post a reply
JavaScript forum discussion
-
How to stop & start the scrolling text on mouseover & onmouseout event.
by codeunit (3 replies)
-
Header and Footer in Web page print
by fhajaj (4 replies)
-
Automatically check/uncheck multiple checkboxes
by gus (3 replies)
-
Re: HTML TABLE
by mikefenej (0 replies)
-
Re: HTML TABLE
by mikefenej (0 replies)
Quick links
Recent activity
- arif ahmad replied to How to receive data in web ...
- William Thompson replied to What is the name of the Win...
- Sameera Piyadigamage replied to Point of Sale Developers: H...
- Scott Carline replied to 4 x C# Developers for large...
- Rajendra Dhakal replied to Restore SQL Server text dat...
- cloud rainda replied to How to convert between TS f...
Enter your message below
Sign in or Join us (it's free).