home   articles   tags   browse code   

HTML Table Row Highlight


 

Javascript:
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:
1Toronto Ontario5,113,149
2MontrealQuebec3,635,571
3VancouverBritish Columbia2,116,581
4Ottawa-GatineauOntario/Quebec1,130,761
5CalgaryAlberta1,079,310
6EdmontonAlberta1,034,945
7Quebec CityQuebec715,515
8WinnipegManitoba694,668
9HamiltonOntario692,911
10LondonOntario457,720
 

Tags: html, php, css, javascript
 
Oscar Quintero on May 9th, 2011 3:26 pm said:
Excellent, thank you!!!!
 

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
 

Bookmark this...
 
Comment on this...
 


 

 



Related Articles
 

html
 

php
 

css
 

javascript
 

home  |  privacy policy  |  terms of use  |  contact  


©2012, Zedwood.com
zedwood.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com