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 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2004
    Location
    Chicago
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Highlighting Table *columns*

    Hi,

    I've been playing with the "crosshair" effect of highlighting a table row and column based on the cell moused over. I've found various scripts that do just that, but none of them work across the platforms I need - which is IE5.0+, NS6+. I'm thinking there should be a way to do this but I've hit a dead end. Here is my table row highlight function:

    PHP Code:
    function HighlightRow() 

        var 
    lastRowClass
        var 
    oRows document.getElementsByTagName("tr"); 
        for(var 
    i=0i<oRows.lengthi++)
        {
            if ((
    oRows[i].className == "rowColor1") || (oRows[i].className == "rowColor2")) 
            { 
                
    oRows[i].onmouseover = function() { 
                    
    lastRowClass this.className
                    
    this.className "rowHL";
                }     
                
    oRows[i].onmouseout = function() { 
                    
    this.className lastRowClass
                }
            } 
            var 
    oCols oRows[i].getElementsByTagName("td");
        } 

    This works just fine, I call it on page load. What I now need to do is highlight the row.

    I'm stumped because I cannot seem to get the table cell reference I need. If I can simply get the index of the cell in the current row I'm golden. Lets say I mouse over row 2, cell 3. If I can somehow capture the fact that I am on cell 3, I can loop through each row and highlight cell 3 no problem.

    Any help is appreciated. Remember, this MUST work in IE5.0+ and NS6.0 + - so that eliminates some more recent DOM methods...

    Thanks!

    Tom
    http://www.pixelmech.com/

    Get your FREE mini-mac! Totally legit - same people who do free iPods:
    http://www.FreeMiniMacs.com/?r=15890422

  • #2
    New Coder
    Join Date
    Sep 2002
    Location
    Moncton, N.B., Canada
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Check it out!

    http://www.xdevdesign.com/testing/crosshairs.htm

    The solution works with a complex table as well. Targeting each td is surprisingly simple as long as you think of the tr and td behaviour as seperate events that don't even have to be related.

    Edit: Just realized that maybe you had something else in mind ... Like a REAL crosshair Indeed that would require some more thought.
    Last edited by Terry; 06-26-2004 at 05:35 PM.

  • #3
    New Coder
    Join Date
    Sep 2002
    Location
    Moncton, N.B., Canada
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can find the index of a cell with the dom method: cellIndex

    Ref here:
    http://www.quirksmode.org/dom/w3c_html.html
    Seems to be implemented in all the major browsers except Safari.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Safari == 'great demographic'

    OK...this is slow as mulattos, but it sort-of-works. Not exactly Flash.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    body {
    	background: buttonface;
    }
    #crosser {
    	margin: 40px auto;
    }
    #crosser th {
    	font: bold 10px verdana, sans-serif;
    }
    #crosser td.index {
    	font: bold 10px verdana, sans-serif;
    	text-align: right;
    	border: none;
    }
    #crosser td.x-off {
    	font: normal 11px verdana, sans-serif;
    	color: #fff;
    	padding: 1px;
    	border: 3px #000 double;
    	background: #000;
    }
    #crosser td.x-on {
    	font: normal 11px verdana, sans-serif;
    	padding: 1px;
    	border: 3px #000 double;
    	background: #ff0;
    }
    tr {
    	cursor: pointer;
    }
    
    </style>
    <script type="text/javascript">
    
    onload = function()
    {
    	var the_table = document.getElementById('crosser'); //get table
    	var c = 0, a_cell, the_cells = the_table.getElementsByTagName('td'); //get cells
    	var col = 1; //index counter
    	while (a_cell = the_cells[c++]) //loop, assign
    	{
    		if (null == a_cell.previousSibling) //new row
    				col = 1; //reset
    		else a_cell.col = col++; //or bump
    		if (a_cell.className == 'x-off') //data cell
    		{
    			a_cell.onmouseover = function()
    			{
    				var this_cell, c = 1;
    				var this_row = this.parentNode.getElementsByTagName('td'); //get row cells
    				while (this_cell = this_row[c++]) //loop
    					this_cell.className = 'x-on'; //flip
    				var r = 1, a_row, all_rows = the_table.getElementsByTagName('tr'); //get all rows
    				while (a_row = all_rows[r++]) //loop
    					if (row_coll = a_row.getElementsByTagName('td')) //not a header
    						row_coll[this.col].className = 'x-on'; //flip cell with same index
    			}
    			a_cell.onmouseout = function()
    			{
    				var this_cell, c = 1;
    				var this_row = this.parentNode.getElementsByTagName('td');
    				while (this_cell = this_row[c++])
    					this_cell.className = 'x-off';
    				var r = 1, a_row, all_rows = the_table.getElementsByTagName('tr');
    				while (a_row = all_rows[r++])
    					if (row_coll = a_row.getElementsByTagName('td'))
    						row_coll[this.col].className = 'x-off';
    			}
    		}
    	}
    }
    
    </script>
    </head>
    <body>
    <table id="crosser" cellspacing="2">
    <thead>
    <tr>
    <th></th>
    <th>a</th>
    <th>b</th>
    <th>c</th>
    <th>d</th>
    <th>e</th>
    <th>f</th>
    <th>g</th>
    <th>h</th>
    <th>i</th>
    <th>j</th>
    <th>k</th>
    <th>l</th>
    </tr>
    </thead>
    <tbody>
    <script type="text/javascript">
    
    for (var z = 1; z < 13; ++z)
    
    	document.write(
    
    			'<tr>' ,
    
    			'<td class="index">' + z + '</td>' ,
    			'<td class="x-off">foo</td>' ,
    			'<td class="x-off">foo</td>' ,
    			'<td class="x-off">foo</td>' ,
    			'<td class="x-off">foo</td>' ,
    			'<td class="x-off">foo</td>' ,
    			'<td class="x-off">foo</td>' ,
    			'<td class="x-off">foo</td>' ,
    			'<td class="x-off">foo</td>' ,
    			'<td class="x-off">foo</td>' ,
    			'<td class="x-off">foo</td>' ,
    			'<td class="x-off">foo</td>' ,
    			'<td class="x-off">foo</td>' ,
    
    			'</tr>'
    
    		       );
    
    </script>
    </tbody>
    </table>
    </body>
    </html>
    Take another look later...

  • #5
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Just thinking out loud:
    Maybe you could get the cells with tr.childNodes

    var trs=document.getElementsByTagName("tr");
    this way, if the cell you hovering trs[3].childNodes[1]
    you can loop through the trs and set their second childNode to the class you want.
    for(var i=0;i<trs.length;++i){
    trs[i].childNodes[1].setAttribute("class","hovered");
    }

    something like that?
    Shawn

  • #6
    New Coder
    Join Date
    Sep 2002
    Location
    Moncton, N.B., Canada
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by adios
    Safari == 'great demographic'

    OK...this is slow as mulattos, but it sort-of-works. Not exactly Flash.
    Not too slow for me, I'm on a p4 2.8. Looks like you nailed it Nice work. With your while loops it should be quicker too. Now that I see it in action I'd have to say that I wouldn't use it in the real world, it looks kinda funny in practice! I think a user would be confused to say the least.

  • #7
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Why not take advantage of event bubbling?

    PHP Code:
    function doCrosshair(evtcls) {
        var 
    oEvent evt || window.event;
        var 
    target oEvent.target  || oEvent.srcElement;
        while (
    target.nodeName.toLowerCase() != "td"target target.parentNode;
        if (
    targettarget.className=cls;
    }

    if (
    document.addEventListener) {
        
    refToTable.addEventListener("mouseover", function(evt) { doCrosshair(evt"hovered") }, false);
        
    refToTable.addEventListener("mouseout", function(evt) { doCrosshair(evt"normal") }, false);
    }
    else if (
    window.attachEvent) {
        
    refToTable.attachEvent("onmouseover", function() { doCrosshair(null"hovered") });
        
    refToTable.attachEvent("onmouseout", function() { doCrosshair(null"normal") });



  •  

    Posting Permissions

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