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:
Avarachan on Jul 31st, 2011 2:45 pm said: Hi, Thanks for posting your code. I have a question. I load page with a table, and this code works well. Then I use AJAX to echo more rows using document.getElementById("showMore").innerHTML=xmlhttp_eight.responseText; But on these rows, mouseover, mouseout and click works, BUT when a second row is clicked, the first row remains highlighted. Do you know why? It would be very helpful. Been trying to get this working for some time now. Thanks VC | 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 |