Changing row color of html table dynamically

A

admin

Administrator
Staff member
I want to change the back ground of a row once I select the table row with the radio button, so that users know which one is selected right away..Any help would be appreciated



<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
<script>
function colorRow(srcElement)
{
var cb = event.srcElement;
var curElement = cb;
while (curElement && (curElement.tagName == "TR"))
{
curElement = curElement.parentElement;
}
if (!(curElement == cb))
{ if (cb.value)
{
curElement.style.backgroundColor = "Red";
}
else
{
curElement.style.backgroundColor = "green";
}
}
}
</script>
</head>

<body>

<table>
<tr>
<td style="FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: black" vAlign="bottom" align="middle">Sl.
No</td>
<td style="FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: black" vAlign="bottom" align="middle">Select</td>
<td style="FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: black" vAlign="bottom" align="middle">Name</td>
<td style="FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: black" vAlign="bottom" align="middle">Social</td>
<td style="FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: black" vAlign="bottom" align="middle">D.O.B</td>
<td style="FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: black" vAlign="bottom" align="middle">Guest
Card</td>
<td style="FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: black" vAlign="bottom" align="middle">Applied
?</td>
<td style="FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: black" vAlign="bottom" align="middle">Pwd</td>
<td style="FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: black" vAlign="bottom" align="middle">Date
Applied</td>
<td style="FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: black" vAlign="bottom" align="middle">Status</td>
<td style="FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: black" vAlign="bottom" align="middle">Wh.
Appl</td>
<td style="FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: black" vAlign="bottom" align="middle">Pwd
Issuer</td>
<td style="FONT-WEIGHT: bold; COLOR: white; BACKGROUND-COLOR: black" vAlign="bottom" align="middle">Leasing
Office</td>
</tr>
<tr style="BACKGROUND-COLOR: lightgrey">
<td vAlign="center" align="middle">1</td>
<td vAlign="center" align="middle"><span onclick="javascript:colorRow(this);"><input type="radio" value=http://www.webdeveloper.com/forum/archive/index.php/"AF1" name="AddToList"></span></td>
<td vAlign="center" align="middle">Shelly,Dennis</td>
<td vAlign="center" align="middle">546825475</td>
<td vAlign="center" align="middle">10/20/1968</td>
<td vAlign="center" align="middle"><a href="http://localhost/UpdatedMod2/ViewGuest.aspx?GuestCardID=GC13">Yes</a></td>
<td vAlign="center" align="middle"><a href="http://localhost/UpdatedMod2/ViewGuest.aspx?ApplicationFormID=AF1">Yes</a></td>
<td vAlign="center" align="middle"><input onclick="window.open('AuthorizePerson.aspx?PersonID=PS15')" type="button" value=http://www.webdeveloper.com/forum/archive/index.php/"Authorize"></td>
<td vAlign="center" align="middle">3/15/2003</td>
<td vAlign="center" align="middle">Pending</td>
<td vAlign="center" align="middle">NO</td>
<td vAlign="center" align="middle">Me</td>
<td vAlign="center" align="middle">The Park Communities</td>
</tr>
<tr style="BACKGROUND-COLOR: lightblue">
<td vAlign="center" align="middle">2</td>
<td vAlign="center" align="middle"><span onclick="javascript:colorRow(this);"><input type="radio" value="AF2" name="AddToList"></span></td>
<td vAlign="center" align="middle">Bradford,Sherrie</td>
<td vAlign="center" align="middle">457545754</td>
<td vAlign="center" align="middle">2/7/1975</td>
<td vAlign="center" align="middle"><a href="http://localhost/UpdatedMod2/ViewGuest.aspx?GuestCardID=GC1">Yes</a></td>
<td vAlign="center" align="middle"><a href="http://localhost/UpdatedMod2/ViewGuest.aspx?ApplicationFormID=AF2">Yes</a></td>
<td vAlign="center" align="middle"><input onclick="window.open('AuthorizePerson.aspx?PersonID=PS2')" type="button" value=http://www.webdeveloper.com/forum/archive/index.php/"Authorize"></td>
<td vAlign="center" align="middle">2/24/2003</td>
<td vAlign="center" align="middle">Pending</td>
<td vAlign="center" align="middle">NO</td>
<td vAlign="center" align="middle">Me</td>
<td vAlign="center" align="middle">The Park Communities</td>
</tr>
<tr style="BACKGROUND-COLOR: lightgrey">
<td vAlign="center" align="middle">3</td>
<td vAlign="center" align="middle"><span onclick="javascript:colorRow(this);"><input type="radio" value="AF2" name="AddToList"></span></td>
<td vAlign="center" align="middle">Bradford,Sherrie</td>
<td vAlign="center" align="middle">457545754</td>
<td vAlign="center" align="middle">2/7/1975</td>
<td vAlign="center" align="middle"><a href="http://localhost/UpdatedMod2/ViewGuest.aspx?GuestCardID=GC3">Yes</a></td>
<td vAlign="center" align="middle"><a href="http://localhost/UpdatedMod2/ViewGuest.aspx?ApplicationFormID=AF2">Yes</a></td>
<td vAlign="center" align="middle"><input onclick="window.open('AuthorizePerson.aspx?PersonID=PS2')" type="button" value=http://www.webdeveloper.com/forum/archive/index.php/"Authorize"></td>
<td vAlign="center" align="middle">2/24/2003</td>
<td vAlign="center" align="middle">Pending</td>
<td vAlign="center" align="middle">NO</td>
<td vAlign="center" align="middle">Me</td>
<td vAlign="center" align="middle">The Park Communities</td>
</tr>
<tr style="BACKGROUND-COLOR: lightblue">
<td vAlign="center" align="middle">4</td>
<td vAlign="center" align="middle"><span onclick="javascript:colorRow(this);"><input type="radio" value="AF3" name="AddToList"></span></td>
<td vAlign="center" align="middle">Shelly,Amy</td>
<td vAlign="center" align="middle">64236595</td>
<td vAlign="center" align="middle">1/20/1980</td>
<td vAlign="center" align="middle">No</td>
<td vAlign="center" align="middle"><a href="http://localhost/UpdatedMod2/ViewGuest.aspx?ApplicationFormID=AF3">Yes</a></td>
<td vAlign="center" align="middle"><input onclick="window.open('AuthorizePerson.aspx?PersonID=PS47')" type="button" value=http://www.webdeveloper.com/forum/archive/index.php/"Authorize"></td>
<td vAlign="center" align="middle">2/24/2003</td>
<td vAlign="center" align="middle">Pending</td>
<td vAlign="center" align="middle">NO</td>
<td vAlign="center" align="middle">Me</td>
<td vAlign="center" align="middle">The Park Communities</td>
</tr>
<tr style="BACKGROUND-COLOR: lightgrey">
<td vAlign="center" align="middle">5</td>
<td vAlign="center" align="middle"><span onclick="javascript:colorRow(this);"><input type="radio" value="AF4" name="AddToList"></span></td>
<td vAlign="center" align="middle">Robinson,George</td>
<td vAlign="center" align="middle">654564654</td>
<td vAlign="center" align="middle">10/30/2002</td>
<td vAlign="center" align="middle">No</td>
<td vAlign="center" align="middle"><a href="http://localhost/UpdatedMod2/ViewGuest.aspx?ApplicationFormID=AF4">Yes</a></td>
<td vAlign="center" align="middle"><input onclick="window.open('AuthorizePerson.aspx?PersonID=PS9')" type="button" value=http://www.webdeveloper.com/forum/archive/index.php/"Authorize"></td>
<td vAlign="center" align="middle">2/24/2003</td>
<td vAlign="center" align="middle">Pending</td>
<td vAlign="center" align="middle">NO</td>
<td vAlign="center" align="middle">Me</td>
<td vAlign="center" align="middle">The Park Communities</td>
</tr>
<tr style="BACKGROUND-COLOR: lightblue">
<td vAlign="center" align="middle">6</td>
<td vAlign="center" align="middle"><span onclick="javascript:colorRow(this);"><input type="radio" value="AF5" name="AddToList"></span></td>
<td vAlign="center" align="middle">Kenny,King</td>
<td vAlign="center" align="middle">545564564</td>
<td vAlign="center" align="middle">10/12/1977</td>
<td vAlign="center" align="middle">No</td>
<td vAlign="center" align="middle"><a href="http://localhost/UpdatedMod2/ViewGuest.aspx?ApplicationFormID=AF5">Yes</a></td>
<td vAlign="center" align="middle"><input onclick="window.open('AuthorizePerson.aspx?PersonID=PS8')" type="button" value=http://www.webdeveloper.com/forum/archive/index.php/"Authorize"></td>
<td vAlign="center" align="middle">2/27/2003</td>
<td vAlign="center" align="middle">Pending</td>
<td vAlign="center" align="middle">NO</td>
<td vAlign="center" align="middle">Me</td>
<td vAlign="center" align="middle">The Park Communities</td>
</tr>
</table>

</body>

</html>
 
You must log in or register to reply here.
Back
Top