Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Location
    Los Angeles
    Posts
    545
    Thanks
    81
    Thanked 5 Times in 5 Posts

    Can I detect a table row click?

    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...
    RalphF
    Business Text Messaging Services
    https://www.MobileTextingService.com

  • #2
    Regular Coder
    Join Date
    Mar 2006
    Posts
    725
    Thanks
    35
    Thanked 132 Times in 123 Posts
    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.

    Code:
    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.
    Last edited by mrhoo; 08-12-2008 at 06:30 PM.

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Location
    Los Angeles
    Posts
    545
    Thanks
    81
    Thanked 5 Times in 5 Posts
    I'm getting an err msg: "T has no properties" on this line:

    >T.ondblclick = function(e){


    PHP Code:
    <!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 
    document.getElementsByTagName('tablesorter-demo')[0];
    T.ondblclick = function(e){    
        
    ewindow.eventevent.srcElement e.target;    
        while(
    && e.tagName!= 'TR'ee.parentNode;
        if(
    e){
            
    //remove previous hilighting:
            
    var Re.parentNode.getElementsByTagName('tr');
            var 
    LR.length;
            while(
    LR[--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> 
    RalphF
    Business Text Messaging Services
    https://www.MobileTextingService.com

  • #4
    Regular Coder
    Join Date
    Mar 2006
    Posts
    725
    Thanks
    35
    Thanked 132 Times in 123 Posts
    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">
    Code:
    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>
    Last edited by mrhoo; 08-12-2008 at 09:16 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •