Member Avatar for nimareq

Hi, imagine table with 15 rows and 3 columns. If I move mouse over any cell I want some other specific cells to change their borders like with pseudo-class :hover.
I have tried many combinations and I am still having problems, so if you see, where am I making a mistake, please reply.

example

<style>
.boryellow {border: 3px solid yellow}
.borblue {border: 3px solid black}
</style>

this will work, a cell can change itself

<td name="third" class="boryellow" onmouseover="this.className='borblue'" onmouseout="this.className='boryellow'">cell</td>

even when dealing with empty images - click on link will change border of different element - imgs, but not span or td ...

<a href="#" onclick="document.all.xxx.className='borblue'; document.all['name'].className='borblue'; document['abc'].className='borblue';">click me</a><br>
<img name="xxx" class="boryellow">
<span name="spanx" class="boryellow">text in span</span>
<br>
<img name="name">
<img name="abc" border="0">

(see different ways to get at an element)
Replacing any element link by "third" or "spanx" will cause stuck ant not executing other actions.

  • 2 Contributors
  • 4 Replies
  • 123 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

NimaReq,

There are many ways to do this.

Here's one using an optional custom HTML attribute target to designate an active cell and the id of an associated cell:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
#myTable {
	border: 1px solid black;
}
#myTable td {
	border: 3px solid yellow;
}
#myTable td.highlight {
	border: 3px solid blue;
}
</style>

<script>
onload = function() {
	var c, tgt, oTgt, i, j, t;
	var t = document.getElementById('myTable');
	for(var i=0; i<t.rows.length; i++) {//loop through rows
		for(j=0; j<t.rows[i].cells.length; j++) {//loop through cells within row
			c = t.rows[i].cells[j];//reference to cell
			if(tgt = c.getAttribute('target')) {//"assignment", the target cell's ID
				if(oTgt = document.getElementById(tgt)) {//"assignment", the target cell's DOM node
					c.setAttribute( 'target', oTgt);//replace html attribute with corresponding DOM node
					c.style.textDecoration = 'underline';//indicate that cell has a target (optional)
					c.onmouseout  = function() { this.getAttribute('target').className = ""; };//set mouseover action
					c.onmouseover = function() { this.getAttribute('target').className = "highlight"; };//set mouseout action
					c.onmouseout();//initialise target cell by firing onmouseout method
				}
			}
		}
	}
}
</script>
</head>

<body>

<table id="myTable" cellpadding="3" cellspacing="3">
<tr><td id="0_0" target="0_1">Cell 0,0</td><td id="0_1">Cell 0,1</td><td id="0_2">Cell 0,2</td></tr>
<tr><td id="1_0" target="1_2">Cell 1,0</td><td id="1_1">Cell 1,1</td><td id="1_2">Cell 1,2</td></tr>
<tr><td id="2_0" target="2_1">Cell 2,0</td><td id="2_1">Cell 2,1</td><td id="2_2">Cell 2,2</td></tr>
<tr><td id="3_0" target="3_2">Cell 3,0</td><td id="3_1">Cell 3,1</td><td id="3_2">Cell 3,2</td></tr>
<tr><td id="4_0" target="4_1">Cell 4,0</td><td id="4_1">Cell 4,1</td><td id="4_2">Cell 4,2</td></tr>
<tr><td id="5_0" target="5_1">Cell 5,0</td><td id="5_1">Cell 5,1</td><td id="5_2">Cell 5,2</td></tr>
<tr><td id="6_0" target="6_2">Cell 6,0</td><td id="6_1">Cell 6,1</td><td id="6_2">Cell 6,2</td></tr>
<tr><td id="7_0" target="7_1">Cell 7,0</td><td id="7_1">Cell 7,1</td><td id="7_2">Cell 7,2</td></tr>
<tr><td id="8_0" target="8_2">Cell 8,0</td><td id="8_1" target="7_1">Cell 8,1</td><td id="8_2">Cell 8,2</td></tr>
<tr><td id="9_0" target="9_2">Cell 9,0</td><td id="9_1">Cell 9,1</td><td id="9_2" target="0_0">Cell 9,2</td></tr>
</table>

</body>
</html>

As you will see,

  • All cells are given a yellow border by default (in CSS)
  • Active cells (cells that have targets) are indicated with underlined text
  • Target cells can be on same row or other row
  • Target cells can also be active cells
  • Once the javascript is written, behaviour is determined by the HTML custom attributes.

This may not be exactly what you want but should get your started.

Airshow

Edited by Airshow because: n/a
Member Avatar for nimareq

How did it work to you? (It didn't work to me) I can see the Idea, but it is quiet higher lvl than me :) So thanks, I think I can live without nice table effects.

What I meant was to highlight price in third column when moving mouse over product in second column and vice versa. (and also to highlight proper cell in first "group" column)
e.g. ("fruits" and "veg." cells are rowspans)
group | product | price
fruits | apple | 20
| banana | 40
veg. | something.. | 10
| smthn2| 12
...
...

Edited by nimareq because: n/a
Member Avatar for Airshow

NimaReq,

That should be a light adaptation of my demo page. All you need to do is :

  • Give your table an apprioriate id
  • Reflect the table's id in the line var t = document.getElementById('[I]myTable[/I]'); and in the style sheet
  • Give each of your target cells a unique id
  • Give each mouseover cell a target attribute to bind it to another cell
  • Adapt the CSS to give the visual effect you desire.

Cells with rowspan are just table cells like any other. The code will handle them.

Airshow

Edited by Airshow because: n/a
Member Avatar for Airshow

Nimareq,

This problem is actually quite absorbing and I have taken another look.

There's a better approach which allows the javascript to "discover" which cells to highlight, as opposed to the custom tag approach which would become rather tedious with cells having multiple targets.

I think this might be closer to what you want :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
.parseMe {
	margin: 0 0 6px 0;
	border: 1px solid black;
}
.parseMe th {
	border: 3px solid #e0e0e0;
}
.parseMe td {
	border: 3px solid #e0e0e0;
	text-align: center;
}
.parseMe td.highlight {
	border: 3px solid #0000a0;
}
</style>

<script>
onload = function() {
	var mouseAction = function(tgts, clss) {//mouseover/mouseout action
		var i;
		for(i=0; i<tgts.length; i++) {
			if(tgts[i]) { tgts[i].className = clss; }
		}
	};
	var i, j, k, t, c, c2, cr, crRow;
	var tables = document.getElementsByTagName('table');
	for(var i=0; i<tables.length; i++) {//loop through tables
		if(tables[i].className.indexOf('parseMe') == -1) { continue; }
		var t = tables[i];
		for(var j=0; j<t.rows.length; j++) {//loop through rows
			for(k=0; k<t.rows[j].cells.length; k++) {//loop through cells within row
				c = t.rows[j].cells[k];//reference to cell
				if( c.tagName.toUpperCase() !== 'TD' ) { continue; }
				if( Number(c.getAttribute('rowspan')) > 1 ) {
					c.targetObjs = [c];
					cr = c;//cell with rowspan
					crIndex = j;
				}
				else if((crIndex==j && k==1) || k==0) {//if c is first cell after a rowspan or first cell of a non rowspan row
					if(cr) { cr.targetObjs.push(c); }
					c.targetObjs = [cr, c];
					c2 = c;//the "second" cell in a row (after rowspan cell)
				}
				else {//all other cells in a row
					if(cr) { cr.targetObjs.push(c); }
					if(c2) { 
						c2.targetObjs.push(c);
						c.targetObjs = c2.targetObjs;
					}
				}
				if(c.targetObjs) {
					c.onmouseout  = function() { mouseAction(this.targetObjs, ''); }//set mouseout action
					c.onmouseover = function() { mouseAction(this.targetObjs, 'highlight'); }//set mouseover action
					c.onmouseout();//initialise target cell by firing onmouseout method
				}
			}
		}
		c = cr = c1 = crRow = null;
	}
}
</script>
</head>

<body>
<table class="parseMe" id="myTable2" cellpadding="3" cellspacing="3">
<tr><th>Group</th><th>Product</th><th>Price</th></tr>
<tr>
	<td rowspan="2">Fruits</td>
	<td>Apple</td>
	<td>20</td>
</tr>
<tr>
	<td>Banana</td>
	<td>40</td>
</tr>
<tr>
	<td rowspan="2">Veg</td>
	<td>Sprouts</td>
	<td>10</td>
</tr>
<tr>
	<td>Beetroot</td>
	<td>12</td>
</tr>
</table>

</body>
</html>

Please note that this is not a general solution for all tables (which would take longer to code). It's based on assumptions about the format of the table:

  • that the header cells are <th> not <td>.
  • that there's a maximum of one rowspan per row
  • that the rowspan occurs in the first column
  • that there are no colspans

If these assumptions are violated then the code may crash (despite considerable built in safety). At best the result will be somewhat chaotic. I'm sure a general approach exists but it would require research.

As long as you give your table the class name "parseMe", and the assumptions are not violated, then the javascript should work without modification.

Airshow

Edited by Airshow because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.