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 Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How can be highlighted the intersection of a column with a row

Status
Not open for further replies.
marinpa

marinpa

Technical User
Joined
Feb 12, 2001
Messages
19
Location
CA
Hi there,

Does anyone know what would be the best way to highlight onMouseover a column and a row that are intersecting.

A graphic representation (example)of my question

Thank you for your time.
 
Sort by date Sort by votes
IE, Firefox or both?

------
[small]select stuff(stuff(replicate('<P> <B> ', 14), 109, 0, '<.'), 112, 0, '/')[/small]
[banghead]
 
Upvote 0 Downvote
I wrote this when I was first learning javascript, I didn't thoroughly test it, but it works in IE. Also, the code is pretty crappy - it would fail HTML validation tests horribly, but it should give you a good starting point:
Code: 
<script language=javascript>

function displayAxis(obj, over) {
   var rowStr = "";
   var colStr = ""
   var rowObj = obj.parentElement;
   for (i = 0; i < rowObj.childNodes.length; i++) {
      //highlight the row
      if (rowObj.childNodes[i] == obj) {
         var tblCol = i;
         rowObj.childNodes[i].style.fontWeight = (over) ? 'bold' : 'normal';         
         rowObj.childNodes[i].style.color = (over) ? '#ffff00' : '#000000';
         rowObj.childNodes[i].style.backgroundColor = (over) ? '#888888' : '#ffffff';
         rowStr += "<span style='color:red; font-weight:bold'>" + rowObj.childNodes[i].innerHTML + "</span> - ";
      }
      else {
         rowObj.childNodes[i].style.backgroundColor = (over) ? '#bbbbbb' : '#ffffff';
         rowStr += rowObj.childNodes[i].innerHTML + " - ";
      }
   }
   document.getElementById("theRow").innerHTML = "Row values: " + rowStr.substr(0, rowStr.length - 3);
   var tblObj = rowObj.parentElement;
   for (i = 0; i < tblObj.childNodes.length; i++) {
      //highlight the column
      if (tblObj.childNodes[i].childNodes[tblCol] != obj) {
         tblObj.childNodes[i].childNodes[tblCol].style.backgroundColor = (over) ? '#bbbbbb' : '#ffffff';
         colStr += tblObj.childNodes[i].childNodes[tblCol].innerHTML + " - ";
      }
      else {
         colStr += "<span style='color:red; font-weight:bold'>" + tblObj.childNodes[i].childNodes[tblCol].innerHTML + "</span> - ";
      }
   }
   document.getElementById("theCol").innerHTML = "Column values: " + colStr.substr(0, colStr.length - 3);
}
</script>
<body>
<form name=blahForm>
<table border=1 cellpadding=3>
<script language=javascript>
for (i = 0; i < 10; i++) {
   document.write("<tr>");
   for (j = 0; j < 10; j++) {
      document.write("<td style='cursor:pointer' onmouseover='displayAxis(this, true)' onmouseout='displayAxis(this, false)'>" + i + ", " + j + "</td>");
   }
   document.write("</tr>");
}
</script>
</table><br><br>
<div id=theRow></div><br>
<div id=theCol></div>
</form>
</body>

-kaht

[small] <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
[banghead] [small](He's back)[/small]
 
Upvote 0 Downvote
There are a number of ways to do it.
Will you be generating the page dynamically?
The ID of each cell should be sequentially named indicating both row and column position like:
C1R1, C2R1, C3R1, C4R1
C1R2, C2R2, C3R2, C4R2
C1R3, C2R3, C3R3, C4R3

When the onmouseover calls the function you can just pass the current cell ID and then split out the values associated with C and R to use in your highlighting loop or you can pass the literal values for row and column. For example assume C2R2 triggered the onmouseover.
<td id="C2R2" onmouseover="highlight(2,2)">

In your function you would use those values to loop through the cells and change their style.

If you also pass in the color to change to you could use the same function to change them back with onmouseoff.
Here is an example
Code: 
<title></title>
<script type="text/javascript">
function highlight(c, r,sColor) {
  //Highlight cells along the column.
  for (var x=1; x<=r; x++) {
    document.getElementById('C'+c+'R'+x).style.backgroundColor=sColor;
  }
  //Highlight cells along the row.
  for (var x=1; x<=c; x++) {
    document.getElementById('C'+x+'R'+r).style.backgroundColor=sColor;
  }
}
</script>
</head>
<body>
<table border="1">
  <tr>
    <td width="100" id="C1R1" onmouseover="highlight(1,1,'yellow');" onmouseout="highlight(1,1,'white');">&nbsp;</td>
    <td width="100" id="C2R1" onmouseover="highlight(2,1,'yellow');" onmouseout="highlight(2,1,'white');">&nbsp;</td>
    <td width="100" id="C3R1" onmouseover="highlight(3,1,'yellow');" onmouseout="highlight(3,1,'white');">&nbsp;</td>
    <td width="100" id="C4R1" onmouseover="highlight(4,1,'yellow');" onmouseout="highlight(4,1,'white');">&nbsp;</td>
  </tr>
  <tr>
    <td width="100" id="C1R2" onmouseover="highlight(1,2,'yellow');" onmouseout="highlight(1,2,'white');">&nbsp;</td>
    <td width="100" id="C2R2" onmouseover="highlight(2,2,'yellow');" onmouseout="highlight(2,2,'white');">&nbsp;</td>
    <td width="100" id="C3R2" onmouseover="highlight(3,2,'yellow');" onmouseout="highlight(3,2,'white');">&nbsp;</td>
    <td width="100" id="C4R2" onmouseover="highlight(4,2,'yellow');" onmouseout="highlight(4,2,'white');">&nbsp;</td>
  </tr>
  <tr>
    <td width="100" id="C1R3" onmouseover="highlight(1,3,'yellow');" onmouseout="highlight(1,3,'white');">&nbsp;</td>
    <td width="100" id="C2R3" onmouseover="highlight(2,3,'yellow');" onmouseout="highlight(2,3,'white');">&nbsp;</td>
    <td width="100" id="C3R3" onmouseover="highlight(3,3,'yellow');" onmouseout="highlight(3,3,'white');">&nbsp;</td>
    <td width="100" id="C4R3" onmouseover="highlight(4,3,'yellow');" onmouseout="highlight(4,3,'white');">&nbsp;</td>
  </tr>
  <tr>
    <td width="100" id="C1R4" onmouseover="highlight(1,4,'yellow');" onmouseout="highlight(1,4,'white');">&nbsp;</td>
    <td width="100" id="C2R4" onmouseover="highlight(2,4,'yellow');" onmouseout="highlight(2,4,'white');">&nbsp;</td>
    <td width="100" id="C3R4" onmouseover="highlight(3,4,'yellow');" onmouseout="highlight(3,4,'white');">&nbsp;</td>
    <td width="100" id="C4R4" onmouseover="highlight(4,4,'yellow');" onmouseout="highlight(4,4,'white');">&nbsp;</td>
  </tr>
</table>
</body>
</html>


Paranoid? ME?? Who wants to know????
 
Upvote 0 Downvote
How about dynamically changing CSS className on corresponding TR and COL tags - on both mouse over and out? One event handler for entire table...

------
[small]select stuff(stuff(replicate('<P> <B> ', 14), 109, 0, '<.'), 112, 0, '/')[/small]
[banghead]
 
Upvote 0 Downvote
I gotta stop taking bathroom breaks while replying.
;)

My code was a quick and dirty. I would rather just pass the id of the cell highlighted, split out the values and then use them rather than having the values all manually set in the mouse events but my brain does not work this close to quitting time. :)

Paranoid? ME?? Who wants to know????
 
Upvote 0 Downvote
Here we go... damn, I'm rusty :X
Code: 
<html>
<head>
<title>Test</title>

<style type="text/css">
.grid td
{	border: solid gray 1px;

}
.grid .hilite
{	background-color: #ccfede;
}
</style>

<script language="javascript">
function highlightCR( e, bHilite )
{	var oNode, oTD, oTR;

	if( navigator.appName.indexOf("Microsoft") > -1) // IE/DOM event models are different...
	{	e = window.event;
		oNode = e.srcElement;
	}
	else
		oNode = e.target;
		
	for( ; oNode.tagName!= "TABLE"; oNode = oNode.parentNode)
	{	if(oNode.tagName=="TD") oTD = oNode;
		if(oNode.tagName=="TR") oTR = oNode;
	}

	// quick & dirty - kaht, help :)	
	oNode = oNode.getElementsByTagName("COL")[oTD.cellIndex];

	changeCSSStyle( oTR, "hilite", bHilite );		
	changeCSSStyle( oNode, "hilite", bHilite );
}

function changeCSSStyle( oNode, sClassName, bAdd )
{	var aCSS = oNode.className.split(" ");
	if( bAdd ) aCSS.push( sClassName ); else aCSS.pop();
	oNode.className = aCSS.join(" ");	
}
</script>
</head>
<body>

<table width="600" class="grid">
<colgroup>
	<col width="20%"><col width="20%"><col width="20%"><col width="20%"><col width="20%">
</colgroup>
<tbody onmouseover="highlightCR(event, true);" onmouseout="highlightCR(event, false);">	
<tr><td>City 1</td><td>City 2</td><td>City 3;</td><td>City 4</td><td>City 5</td></tr>
<tr><td>City 2</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>City 3</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>City 4</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>City 5</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
</tbody>
</table>

</body>
</html>

------
[small]select stuff(stuff(replicate('<P> <B> ', 14), 109, 0, '<.'), 112, 0, '/')[/small]
[banghead]
 
Upvote 0 Downvote
Great!
Thanks ya all!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

malpa
  • Locked
  • Question Question
Graph the selection of a html table row
Replies
0
Views
1K
malpa
malpa
Mike Lewis
  • Locked
  • Question Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
5
Views
2K
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
1K
xwb
xwb
coldbohemia
  • Locked
  • Question Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
902
coldbohemia
coldbohemia
penguinspeaks
  • Locked
  • Question Question
How do I pass a classic asp variable to JS
Replies
1
Views
1K
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top