...

View Full Version : Can I detect a table row click?



rfresh
08-12-2008, 05:42 PM
I have a table row of data - it is possible to click on one of the rows and have it 'highlight'? I know this would have to be done using JS to change the background color of the selected row but I am not sure if clicking on a specific table row can be detected?

Thanks...

mrhoo
08-12-2008, 06:25 PM
Unless you have very wide spacing between cells
it is difficult to click on a table row directly.
Bubbling will pass a cell click to its row, however.

I'd use a double click for highlighting a row,
otherwise it becomes difficult to select anything.


var T= document.getElementsByTagName('table')[0];
T.ondblclick= function(e){
e= window.event? event.srcElement : e.target;
while(e && e.tagName!= 'TR') e= e.parentNode;
if(e){
//remove previous hilighting:
var R= e.parentNode.getElementsByTagName('tr');
var L= R.length;
while(L) R[--L].className= '';

//apply hilighting to selected row:
e.className= 'highlightClass';
}
}

Define normal tr and tr.highlightClass in a stylesheet to toggle the effect you want.

rfresh
08-12-2008, 08:15 PM
I'm getting an err msg: "T has no properties" on this line:

>T.ondblclick = function(e){




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">
table.tablesorter {font-family:arial;background-color: #CDCDCD;margin:0px 0pt 0px;font-size:100%;width: 95.5%;text-align: left}
#body-content-div {position: absolute; top: 20px; bottom: 0px; right: 0; left: 20px; border: 1px solid #000; overflow: auto;}
table.tablesorter-demo tr .tr.highlightClass {
background-color:#FFFF66;
}
</style>

<script type="text/javascript">
var T = document.getElementsByTagName('tablesorter-demo')[0];
T.ondblclick = function(e){
e= window.event? event.srcElement : e.target;
while(e && e.tagName!= 'TR') e= e.parentNode;
if(e){
//remove previous hilighting:
var R= e.parentNode.getElementsByTagName('tr');
var L= R.length;
while(L) R[--L].className= '';

//apply hilighting to selected row:
e.className= 'highlightClass';
}
}
</script>
</head>


<div id="body-content-div" style="height:100px;width:400px">
<table id="tablesorter-demo" name="tablesorter-demo" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
<TR><TD width="30" align="center" bgcolor="#B9FDBE">Sat</TD><TD width="88" align="center" bgcolor="#B9FDBE">08/10/2008</TD><TD bgcolor="#B9FDBE">Flush black tank on Monday</TD></TR>
</TABLE>
</div>



</html>

mrhoo
08-12-2008, 09:13 PM
The table does not exist when you refer to it-
either put the script after the table in the source, or (better) call it onload,
so it does not run until the body has loaded.

If you are calling the table by an id, don't use the tag name referrence.
<script type="text/javascript">

window.onload=function(){
var T= document.getElementsByTagName('table')[0];
T.ondblclick= function(e){
e= window.event? event.srcElement : e.target;
while(e && e.tagName!='TR') e= e.parentNode;
if(e){
//remove previous hilighting:
var R= e.parentNode.getElementsByTagName('tr');
var L= R.length;
while(L) R[--L].className='';
//apply hilighting to selected row:
e.className='highlightClass';
}
}
}
</script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum