Table Highlighting On Click

[iam_clint]

This is one way to make it possible to highlight rows and cols in a table with an intersecting color
[CODE=javascript]
<script>
/* Javascript written by iam_clint */
vertColor="#66f fcc";
horzColor="#b7e fff";
intersectColor= "#aa22f0";

function vertClick(col, tbl) {
var color="";
var blnColSpan = false;
var table = document.getEle mentById(tbl);
var entireRow=table .getElementsByT agName("tr");
for (i=0; i<entireRow.len gth; i++) {
curEle = entireRow[i].getElementsByT agName("td")[col];
for (b=0; b<entireRow[i].getElementsByT agName("td").le ngth; b++) {
colspan = entireRow[i].getElementsByT agName("td")[b].getAttribute(" colspan");
if (colspan!=null && colspan!=1) { blnColSpan = true; }
}
if (!blnColSpan) {
if (typeof(curEle) =="object") {
if (curEle.getAttr ibute("vert")== null || curEle.getAttri bute("vert")==" false") { curEle.setAttri bute("vert", "true"); color = vertColor; } else { curEle.setAttri bute("vert", "false"); color=""; }
if (curEle.getAttr ibute("horz")== "true" && curEle.getAttri bute("vert")==" true") { curEle.style.ba ckgroundColor=i ntersectColor; } else if (curEle.getAttr ibute("vert")== "false" && curEle.getAttri bute("horz")==" true") { curEle.style.ba ckgroundColor=h orzColor; } else { curEle.style.ba ckgroundColor=c olor; }
}
}
blnColSpan = false;
}
}

function horzClick(row, tbl) {
var color="";
var table = document.getEle mentById(tbl);
var entireRow=table .getElementsByT agName("tr")[row-1];
var tds = entireRow.getEl ementsByTagName ("td");
for (i=1; i<tds.length; i++) {
curEle = tds[i];
if (curEle.getAttr ibute("horz")== null || curEle.getAttri bute("horz")==" false") { curEle.setAttri bute("horz", "true"); color = horzColor; } else { curEle.setAttri bute("horz", "false"); color=""; }
if (curEle.getAttr ibute("vert")== "true" && curEle.getAttri bute("horz")==" true") { curEle.style.ba ckgroundColor=i ntersectColor; } else if (curEle.getAttr ibute("vert")== "true" && curEle.getAttri bute("horz")==" false") { curEle.style.ba ckgroundColor = vertColor; } else { curEle.style.ba ckgroundColor = color; }
}
}
</script>
<STYLE>
tr { cursor: pointer; }
table { border-collapse: collapse; width: 100%; height: 100%;}
</STYLE>
<table border=1>
<tbody id="example">
<tr><td onclick="horzCl ick('1', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('2', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('3', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('4', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('5', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('6', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('7', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('8', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('9', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('10', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('11', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('12', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('13', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('14', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6
<tr><td onclick="horzCl ick('15', 'example');">Te st1<td onclick="vertCl ick('1', 'example');">Te st2<td onclick="vertCl ick('2', 'example');">Te st3<td onclick="vertCl ick('3', 'example');">Te st4<td onclick="vertCl ick('4', 'example');">Te st5<td onclick="vertCl ick('5', 'example');">Te st6

</tbody>
</table>

[/CODE]

[ronverdonk]

Good show!

Ronald

[Romulo NF]

Another way of doing it

file: js

window.onload = function() {
tableOne = new hightlightTable("myTable")
}

function hightlightTable(tableId) {
this.table = document.getElementById(tableId)
this.rows = this.table.tBodies[0].getElementsByTagName("tr")
this.cells = this.table.tBodies[0].getElementsByTagName("td")
	
	for (x=0; x<this.cells.length; x++) {
	this.cells[x].hightlight = this
	this.cells[x].onclick = function() { this.hightlight.selectCell(this) }
	}
}

hightlightTable.prototype.selectCell = function(cell) {
this.cellIndex = cell.cellIndex
this.rowIndex = cell.parentNode.rowIndex-1

	for (x=0; x<this.rows.length; x++) {		
		for (y=0; y<this.rows[x].cells.length; y++) {
		this.rows[x].cells[y].className = ""
			if (x == this.rowIndex) {
			this.rows[x].cells[y].className = "cross"
			}
		}
		this.rows[x].cells[this.cellIndex].className = "cross"
	}
	
cell.className = "intersection"
}

file: css

table {width:760px; border-collapse:collapse; table-layout:fixed; font:normal 11px arial; border:1px solid #aaa;}
table th {background:#40478E; color:#fff;}
table td {border:1px solid #ddd; text-indent:5px; cursor:pointer}
table tr.hover td {background:#E0F1F8}

.cross {background:#D0EAD6}
.intersection {background:#347443; color:#fff; font-weight:bold}

file: html
[HTML]
<table id="myTable">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dummy 1A</td>
<td>Dummy 2A</td>
<td>Dummy 3A</td>
<td>Dummy 4A</td>
<td>Dummy 5A</td>
<td>Dummy 6A</td>
<td>Dummy 7A</td>
<td>Dummy 8A</td>
<td>Dummy 9A</td>
</tr>
<tr>
<td>Dummy 1B</td>
<td>Dummy 2B</td>
<td>Dummy 3B</td>
<td>Dummy 4B</td>
<td>Dummy 5B</td>
<td>Dummy 6B</td>
<td>Dummy 7B</td>
<td>Dummy 8B</td>
<td>Dummy 9B</td>
</tr>
<tr>
<td>Dummy 1C</td>
<td>Dummy 2C</td>
<td>Dummy 3C</td>
<td>Dummy 4C</td>
<td>Dummy 5C</td>
<td>Dummy 6C</td>
<td>Dummy 7C</td>
<td>Dummy 8C</td>
<td>Dummy 9C</td>
</tr>
<tr>
<td>Dummy 1D</td>
<td>Dummy 2D</td>
<td>Dummy 3D</td>
<td>Dummy 4D</td>
<td>Dummy 5D</td>
<td>Dummy 6D</td>
<td>Dummy 7D</td>
<td>Dummy 8D</td>
<td>Dummy 9D</td>
</tr>
<tr>
<td>Dummy 1E</td>
<td>Dummy 2E</td>
<td>Dummy 3E</td>
<td>Dummy 4E</td>
<td>Dummy 5E</td>
<td>Dummy 6E</td>
<td>Dummy 7E</td>
<td>Dummy 8E</td>
<td>Dummy 9E</td>
</tr>
<tr>
<td>Dummy 1F</td>
<td>Dummy 2F</td>
<td>Dummy 3F</td>
<td>Dummy 4F</td>
<td>Dummy 5F</td>
<td>Dummy 6F</td>
<td>Dummy 7F</td>
<td>Dummy 8F</td>
<td>Dummy 9F</td>
</tr>
<tr>
<td>Dummy 1G</td>
<td>Dummy 2G</td>
<td>Dummy 3G</td>
<td>Dummy 4G</td>
<td>Dummy 5G</td>
<td>Dummy 6G</td>
<td>Dummy 7G</td>
<td>Dummy 8G</td>
<td>Dummy 9G</td>
</tr>
<tr>
<td>Dummy 1H</td>
<td>Dummy 2H</td>
<td>Dummy 3H</td>
<td>Dummy 4H</td>
<td>Dummy 5H</td>
<td>Dummy 6H</td>
<td>Dummy 7H</td>
<td>Dummy 8H</td>
<td>Dummy 9H</td>
</tr>
<tr>
<td>Dummy 1I</td>
<td>Dummy 2I</td>
<td>Dummy 3I</td>
<td>Dummy 4I</td>
<td>Dummy 5I</td>
<td>Dummy 6I</td>
<td>Dummy 7I</td>
<td>Dummy 8I</td>
<td>Dummy 9I</td>
</tr>
</tbody>
</table>
[/HTML]

[acoder]

Another way of doing it

Nice and unobtrusive.

[acoder]

This is one way to make it possible to highlight rows and cols in a table with an intersecting color

The td and tr tags aren't closed, so the table may not display properly.