Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

TABLE Crosshair Mouse Movement

Status
Not open for further replies.
sfalin

sfalin

Technical User
Aug 14, 2001
72
0
0
US
I have a good script I use to highlight both the row and column of a table based on the cell the mouse is over (hence, the crosshair effect). I've now been asked to take it further and add an onClick event to keep that row/column highlighted until another cell is clicked.
Also, it seems that the more data there is in the table, the slower the highlighting fires, which needs an improvement. I'd be willing to do a complete rewrite of the code, but would need much help.

Here's the code I have so far:
Code: 
...
<script language="JavaScript">
  var rowHighlight = true // turn on row highlights
  var colHighlight = true // turn off row highlights

  function getElement(el) {
    var tagList = new Object
    for (var i = 1; i < arguments.length; i++)
      tagList[arguments[i]] = true
    while ((el!=null) && (tagList[el.tagName]==null))
      el = el.parentElement
    return el
  }

  function checkHighlight(which) {
    var el = getElement(event.srcElement,"TH","TD")
    if (el==null) return
    if ((el.tagName=="TD") && (colHighlight)) {
      var idx = el.cellIndex
      var table = getElement(el, "TABLE")
      var column = table.all.tags("COL")[idx]
      if (which)
        column.className = "cover"
      else
        column.className = ""
    }      
    if ((el.tagName=="TD") && (rowHighlight)) {
      var row = getElement(el, "TR") 
      var table = getElement(row, "TABLE")
      if (which) 
        row.className = "rover"
      else
        row.className = ""
      cache = row
    }
  }

</SCRIPT>

</head>
...

<TABLE WIDTH=100% ONMOUSEOVER="checkHighlight(true)" ONMOUSEOUT="checkHighlight(false)" CELLSPACING=0>
<COL /><COL /><COL /><COL /><COL />
<THEAD>
<TR CLASS=noScroll>
	<TH>lorem</TH>
	<TH>ipsum</TH>
	<TH>dolor sit</TH>
	<TH>lorem</TH>
	<TH>ipsum</TH>
</TR>
</THEAD>
<TBODY CLASS=scrollContent>
	<TR><TD>lorem</TD><TD>ipsum</TD><TD>dolor sit</TD><TD>lorem</TD><TD>ipsum</TD></TR>
	<TR><TD>lorem</TD><TD>ipsum</TD><TD>dolor sit</TD><TD>lorem</TD><TD>ipsum</TD></TR>
	<TR><TD>lorem</TD><TD>ipsum</TD><TD>dolor sit</TD><TD>lorem</TD><TD>ipsum</TD></TR>
	<TR><TD>lorem</TD><TD>ipsum</TD><TD>dolor sit</TD><TD>lorem</TD><TD>ipsum</TD></TR>
	<TR><TD>lorem</TD><TD>ipsum</TD><TD>dolor sit</TD><TD>lorem</TD><TD>ipsum</TD></TR>
	<TR><TD>lorem</TD><TD>ipsum</TD><TD>dolor sit</TD><TD>lorem</TD><TD>ipsum</TD></TR>
</TBODY>
</TABLE>
 
Sort by date Sort by votes
I've made some changes to get the effect I need now, but if there are many rows of data, the highlight effect is slow.
Is there anything I can do to speed this up?

As a linked JS file, in my HEAD tag:
Code: 
...
// ONMOUSEOVER="checkHighlight(true)" ONMOUSEOUT="checkHighlight(false)" 

//  var rowHighlight = true // turn on row highlights
  var colHighlight = true // turn on column highlights


last=null;
function MouseOut(obj)
{
    if(last!=obj) obj.bgColor='';
}
function MouseOver(obj)
{
    if(last!=obj) obj.bgColor='#DCE9F0';
}
function MouseClick(obj)
{
    if(last) last.bgColor='';
    last=obj;
    obj.bgColor='#99CCFF';
}


  function getElement(el) {
    var tagList = new Object
    for (var i = 1; i < arguments.length; i++)
      tagList[arguments[i]] = true
    while ((el!=null) && (tagList[el.tagName]==null))
      el = el.parentElement
    return el
  }

  function checkHighlight(which) {
    var el = getElement(event.srcElement,"TH","TD")
    if (el==null) return
    if ((el.tagName=="TD"|"COL") && (colHighlight)) {
      var idx = el.cellIndex
      var table = getElement(el, "TABLE")
      var column = table.all.tags("COL")[idx]
      if (which)
        column.className="cover"
      else
        column.className=""
    }
//    if ((el.tagName=="TD") && (rowHighlight)) {
//      var row = getElement(el, "TR") 
//      var table = getElement(row, "TABLE")
//      if (which) 
//        row.className = "rover"
//      else
//        row.className = ""
//      cache = row
//    }
  }

And my table:
Code: 
...
   <DIV ID=container>
    <TABLE ONMOUSEOVER="checkHighlight(true)" ONMOUSEOUT="checkHighlight(false)" CELLSPACING=0 WIDTH=100%>
	 <COL /><COL /><COL /><COL /><COL /><COL /><COL /><COL /><COL /><COL /><COL /><COL /><COL /><COL /><COL /><COL />
<THEAD>
	 <TR CLASS=noScroll>
	  <TH>lorem</TH>
	  <TH>ipsum</TH>
	  <TH>dolor sit</TH>
	  <TH>lorem</TH>
	  <TH>ipsum</TH>
	  <TH>dolor sit</TH>
	  <TH>lorem</TH>
	  <TH>ipsum</TH>
	  <TH>dolor sit</TH>
	  <TH>lorem</TH>
	  <TH>ipsum</TH>
	  <TH>dolor sit</TH>
	  <TH>lorem</TH>
	  <TH>ipsum</TH>
	  <TH>dolor sit</TH>
	  <TH>lorem</TH>
	 </TR>
	 </THEAD>
<TBODY CLASS=scrollContent>
	 <TR onMouseOver="MouseOver(this)" onMouseOut="MouseOut(this)" onClick="MouseClick(this)">
	  <TD>lorem</TD>
	  <TD>ipsum</TD>
	  <TD>dolor sit</TD>
	  <TD>lorem</TD>
	  <TD>ipsum</TD>
	  <TD>dolor sit</TD>
	  <TD>lorem</TD>
	  <TD>ipsum</TD>
	  <TD>dolor sit</TD>
	  <TD>lorem</TD>
	  <TD>ipsum</TD>
	  <TD>dolor sit</TD>
	  <TD>lorem</TD>
	  <TD>ipsum</TD>
	  <TD>dolor sit</TD>
	  <TD>lorem</TD>
	 </TR>
	 <TR onMouseOver="MouseOver(this)" onMouseOut="MouseOut(this)" onClick="MouseClick(this)">
	  <TD>lorem</TD>
	  <TD>ipsum</TD>
	  <TD>dolor sit</TD>
	  <TD>lorem</TD>
	  <TD>ipsum</TD>
	  <TD>dolor sit</TD>
	  <TD>lorem</TD>
	  <TD>ipsum</TD>
	  <TD>dolor sit</TD>
	  <TD>lorem</TD>
	  <TD>ipsum</TD>
	  <TD>dolor sit</TD>
	  <TD>lorem</TD>
	  <TD>ipsum</TD>
	  <TD>dolor sit</TD>
	  <TD>lorem</TD>
	 </TR>
	 <TR onMouseOver="MouseOver(this)" onMouseOut="MouseOut(this)" onClick="MouseClick(this)">
	  <TD>lorem</TD>
	  <TD>ipsum</TD>
	  <TD>dolor sit</TD>
	  <TD>lorem</TD>
	  <TD>ipsum</TD>
	  <TD>dolor sit</TD>
	  <TD>lorem</TD>
	  <TD>ipsum</TD>
	  <TD>dolor sit</TD>
	  <TD>lorem</TD>
	  <TD>ipsum</TD>
	  <TD>dolor sit</TD>
	  <TD>lorem</TD>
	  <TD>ipsum</TD>
	  <TD>dolor sit</TD>
	  <TD>lorem</TD>
	 </TR>
	 <TR onMouseOver="MouseOver(this)" onMouseOut="MouseOut(this)" onClick="MouseClick(this)">
	  <TD>lorem</TD>
	  <TD>ipsum</TD>
	  <TD>dolor sit</TD>
	  <TD>lorem</TD>
	  <TD>ipsum</TD>
	  <TD>dolor sit</TD>
	  <TD>lorem</TD>
	  <TD>ipsum</TD>
	  <TD>dolor sit</TD>
	  <TD>lorem</TD>
	  <TD>ipsum</TD>
	  <TD>dolor sit</TD>
	  <TD>lorem</TD>
	  <TD>ipsum</TD>
	  <TD>dolor sit</TD>
	  <TD>lorem</TD>
	 </TR>
	 <TR onMouseOver="MouseOver(this)" onMouseOut="MouseOut(this)" onClick="MouseClick(this)">
	  <TD>lorem</TD>
	  <TD>ipsum</TD>
	  <TD>dolor sit</TD>
	  <TD>lorem</TD>
	  <TD>ipsum</TD>
	  <TD>dolor sit</TD>
	  <TD>lorem</TD>
	  <TD>ipsum</TD>
	  <TD>dolor sit</TD>
	  <TD>lorem</TD>
	  <TD>ipsum</TD>
	  <TD>dolor sit</TD>
	  <TD>lorem</TD>
	  <TD>ipsum</TD>
	  <TD>dolor sit</TD>
	  <TD>lorem</TD>
	 </TR>
	 </TBODY>
    </TABLE>
   </DIV>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
152
lexer
lexer
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
153
malpa
malpa
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
132
coldbohemia
coldbohemia
TheLazyPig
  • Locked
  • Question
Copy details of searched reference to table using Angular JS
Replies
0
Views
40
TheLazyPig
TheLazyPig
AbidingDude
  • Locked
  • Question
Dynamically Create A Table
Replies
3
Views
66
AbidingDude
AbidingDude

Part and Inventory Search

Sponsor

Back
Top