View Full Version : Highlight and select search results in table row

05-08-2009, 11:27 PM
Hi all. I have a PHP script that searches a database and outputs the results in a table with several TD's.

The user can select a radiobutton and press a button to edit that record.

I need a JavaScript to do this :

Highlight the entire row when the mouse is over it (using in-line class).
Un-highlight when the mouse exits it (in-line class again).
Allow the user to select the radio button by clicking anywhere in the row
Highlight the selected row (with another in-line class)

My scripts endlessly have problems. Can any kind soul help?

Below is a small sample from the table...

A non-highlighted row is class "tcell"
a highlighted (mouseover) class is "rhtcell"
a radiobutton selected class is "selcell"

<table align="center" border="0" width="1000" class="stable">
<form method="post" action="index.php">
<tr class="shcell">
<td>Select</td><td>Number</td><td>Name</td><td>Birthday</td><td>Address 1</td><td>Address 2</td><td>City</td>
<tr onClick="ClickRadio(this);" class="tcell" OnMouseOut="cellrollout(this)" OnMouseOver="cellrollover(this, 'rhtcell')"><td><input type="radio" name="patientcode" value="1" checked></td><td>1</td><td>Jeremy Smith</td><td>2009-04-22</td><td></td><td></td><td></td></tr>
<tr onClick="ClickRadio(this);" class="tcell" OnMouseOut="cellrollout(this)" OnMouseOver="cellrollover(this, 'rhtcell')"><td><input type="radio" name="patientcode" value="2"></td><td>2</td><td>Bill Jones</td><td>0000-00-00</td><td></td><td></td><td></td>

05-09-2009, 02:25 AM
Just solved my own problem...
For anyone interested :

note that

class tcell is ordinary text
class rhtcell is text highlighted by mouse-over
class selcell is text highlighted by selection of radio-button

<script type="text/javascript">
function cellrollover(cell){
if (document.all || document.getElementById){
if (!cell.getElementsByTagName('input')[0].checked==true){

function cellrollout(cell){
if (document.all || document.getElementById){
if (cell.getElementsByTagName('input')[0].checked==true){

function ClickRadio(cell){
var rowe=cell.parentNode.getElementsByTagName('TR');
for(var i=0; i<rowe.length; i++) {
if (rowe[i].className == "selcell" || rowe[i].className == "rhtcell"){
rowe[i].className = 'tcell';

<tr onClick="ClickRadio(this)" OnMouseOut="cellrollout(this)" OnMouseOver="cellrollover(this)" class="tcell"><td><input type="radio" name="patientcode" value="4"></td><td>4</td><td>Billy Jones</td><td>0000-00-00</td><td></td><td></td><td></td></tr>