Rollover styling for a Data Table

20pictures

I am trying to edit the layout & styling of table data where the php function creates rows of subscriber information.
I would like to include a rollover function so when a line in selected, it is hightlighted across the page.

Any help is appreciated. I have listed below a section of the php:

=======================================================
function showList() {
$list_id = (int) $_REQUEST['curr_list_id'];
$chk = new cquery();
$chk->set_query_sql("SELECT display FROM mailmachine_customfields_lists WHERE list_id = $list_id");
$chk->run_query();
if ($chk->num_of_rows() != 1) {
cbaseform::showList(true);
} else {
$foo = $chk->get_next_hash();
$e = '<tr class="rows">';
foreach (unserialize($foo['display']) as $k => $v) {
$e .= '<td valign="top" align="right" nowrap width="20%"><a href="{FILE}?sub_id={SUB_ID}&todo=edit">{'.strtoupper($k).'}</a></td>';
}
$e .= '<td valign="top" align="right" width="50px"><input TYPE="checkbox" NAME="select[]" Value="{SUB_ID}" {SELECT}></td></tr>';
parent::showList(true, $e, count(unserialize($foo['display'])) + 1);
}

}

CoderDan

OK, sounds like you want some javascript to change the row's class name on mouseover and mouseout.
Your php and html is a lil strange, but I think what you want is on the line:

$e = '<tr class="rows">';

to change it to something like:

$e = '<tr class="rows" onmouseover="this.className=\'hilite\'" onmouseout="this.className=\'\'">';

and then CSS something like this:

<style type='text/css'>
tr.hilite,
tr.hilite td /* optional, depends on other css */
{
	background-color: yellow;
}
</style>

ixalmida

Or, depending on the effect you want, you can drop the Javascript and just use CSS:

<head>
  <style type="text/css">
    td { background: #FFFFFF; }
    td:hover { background: #FF0000; }
  </style>
</head>

<body>
  <table><tr><td><strong>HELLO</strong></td></tr></table>
</body>

Tested and working.

CoderDan

I think you'll find browser compatibility issues with using tr:hover which is why I use the javascript.

ixalmida

Quite right...works in IE7+/Mozilla - doesn't work in IE6.

20pictures

Fan-tastic... even I could get this to work!