HTML Table Row HighlightJavascript:
var TableRow = { selected:-1, hoverColor:'#CCCCCC', defaultColor:'#EEEEFF', onmouseover : function(trow,id) { if (TableRow.selected!= id) trow.bgColor=TableRow.hoverColor; }, onmouseout : function(trow,id) { if (TableRow.selected!= id) trow.bgColor=TableRow.defaultColor; }, onclick : function(trow,id) { if (TableRow.selected == id) { TableRow.selected = -1; trow.bgColor=TableRow.hoverColor; } else { var r = document.getElementById('id_tablerow_'+TableRow.selected); if (TableRow.selected !=-1 && r) r.bgColor=TableRow.defaultColor; TableRow.selected = id; trow.bgColor=TableRow.hoverColor; } } } CSS: table.selectable-table td { font-size:10pt; font-family: Arial; } table.selectable-table td { cursor:pointer; margin:0px; border:0px; padding:2px 5px 2px 5px; } table.selectable-table { border-spacing:0px; background:#eef;} PHP Which generates HTML $data = array(); $data[] = array(1 ,'Toronto ' ,'Ontario' ,'5,113,149'); $data[] = array(2 ,'Montreal' ,'Quebec' ,'3,635,571'); $data[] = array(3 ,'Vancouver' ,'British Columbia','2,116,581'); $data[] = array(4 ,'Ottawa-Gatineau','Ontario/Quebec' ,'1,130,761'); $data[] = array(5 ,'Calgary' ,'Alberta' ,'1,079,310'); $data[] = array(6 ,'Edmonton' ,'Alberta' ,'1,034,945'); $data[] = array(7 ,'Quebec City' ,'Quebec' ,'715,515'); $data[] = array(8 ,'Winnipeg' ,'Manitoba' ,'694,668'); $data[] = array(9 ,'Hamilton' ,'Ontario' ,'692,911'); $data[] = array(10,'London' ,'Ontario' ,'457,720'); echo "<table cellpadding=0 cellspacing=0 class=selectable-table>"; foreach($data as $j=>$row) { echo "<tr id='id_tablerow_$j' onmouseover=\"TableRow.onmouseover(this,$j);\" onmouseout=\"TableRow.onmouseout(this,$j);\" onclick=\"TableRow.onclick(this,$j);\">"; foreach($row as $d) echo "<td>$d</td>"; echo "</tr>"; } echo "</table>"; DEMO:
| Related Articles php Calculate Script Duration in PHP and... Generate CSV Spreadsheet with PHP Generate PDFs with PHP Generate XLS Spreadsheet files with ... How to properly escape inline javasc... HTML Table Row Highlight PHP - Resize an Image with GD PHP Calculate Duration of MP3 PHP Create Zip file PHP mail Function With Attachments javascript AJAX - Asynchronous Javascript and Xml AJAX Back Button Fix How to properly escape inline javasc... HTML Table Row Highlight Javascript - Drag and Drop Dialog Box Javascript - Objects as Associative ... Javascript Convert Date To String (P... Javascript DHTML Slider Widget Javascript filter search through dat... Parsing XML in Javascript and AJAX |