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

<script>
/* Javascript written by iam_clint */
vertColor="#66ffcc";
horzColor="#b7efff";
intersectColor="#aa22f0";
 
function vertClick(col, tbl) {
    var color="";
    var blnColSpan = false;
    var table = document.getElementById(tbl);
    var entireRow=table.getElementsByTagName("tr");
    for (i=0; i<entireRow.length; i++) {
        curEle = entireRow[i].getElementsByTagName("td")[col];
        for (b=0; b<entireRow[i].getElementsByTagName("td").length; b++) { 
            colspan = entireRow[i].getElementsByTagName("td")[b].getAttribute("colspan");
            if (colspan!=null && colspan!=1) { blnColSpan = true; }
        }
        if (!blnColSpan) { 
            if (typeof(curEle)=="object") {
                if (curEle.getAttribute("vert")==null || curEle.getAttribute("vert")=="false") { curEle.setAttribute("vert", "true"); color = vertColor; } else { curEle.setAttribute("vert", "false"); color=""; }
                if (curEle.getAttribute("horz")=="true" && curEle.getAttribute("vert")=="true") { curEle.style.backgroundColor=intersectColor; } else if (curEle.getAttribute("vert")=="false" && curEle.getAttribute("horz")=="true") { curEle.style.backgroundColor=horzColor; } else { curEle.style.backgroundColor=color; }
            }
        }
        blnColSpan = false;
    }
}
 
function horzClick(row, tbl) {
    var color="";
    var table = document.getElementById(tbl);
    var entireRow=table.getElementsByTagName("tr")[row-1];
    var tds = entireRow.getElementsByTagName("td");
    for (i=1; i<tds.length; i++) {
        curEle = tds[i];
        if (curEle.getAttribute("horz")==null || curEle.getAttribute("horz")=="false") { curEle.setAttribute("horz", "true"); color = horzColor; } else { curEle.setAttribute("horz", "false"); color=""; }
        if (curEle.getAttribute("vert")=="true" && curEle.getAttribute("horz")=="true") { curEle.style.backgroundColor=intersectColor; } else if (curEle.getAttribute("vert")=="true" && curEle.getAttribute("horz")=="false") {  curEle.style.backgroundColor = vertColor; } else { curEle.style.backgroundColor = color;  }
    }
}
</script>
<STYLE>
tr { cursor: pointer; }
table { border-collapse: collapse; width: 100%; height: 100%;}
</STYLE>
<table border=1>
<tbody id="example">
<tr><td  onclick="horzClick('1', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('2', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('3', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('4', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('5', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('6', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('7', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('8', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('9', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('10', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('11', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('12', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('13', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('14', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
<tr><td  onclick="horzClick('15', 'example');">Test1<td onclick="vertClick('1', 'example');">Test2<td onclick="vertClick('2', 'example');">Test3<td onclick="vertClick('3', 'example');">Test4<td onclick="vertClick('4', 'example');">Test5<td onclick="vertClick('5', 'example');">Test6
 
</tbody>
</table>
 
 

[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.