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:
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>