Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > insights

Table Highlighting On Click

iam_clint's Avatar
Forum Leader
  
Join Date: Jul 2006
Location: Oklahoma
Posts: 1,076
#1   Sep 18 '07
This is one way to make it possible to highlight rows and cols in a table with an intersecting color
Expand|Select|Wrap|Line Numbers
  1. <script>
  2. /* Javascript written by iam_clint */
  3. vertColor="#66ffcc";
  4. horzColor="#b7efff";
  5. intersectColor="#aa22f0";
  6.  
  7. function vertClick(col, tbl) {
  8.     var color="";
  9.     var blnColSpan = false;
  10.     var table = document.getElementById(tbl);
  11.     var entireRow=table.getElementsByTagName("tr");
  12.     for (i=0; i<entireRow.length; i++) {
  13.         curEle = entireRow[i].getElementsByTagName("td")[col];
  14.         for (b=0; b<entireRow[i].getElementsByTagName("td").length; b++) { 
  15.             colspan = entireRow[i].getElementsByTagName("td")[b].getAttribute("colspan");
  16.             if (colspan!=null && colspan!=1) { blnColSpan = true; }
  17.         }
  18.         if (!blnColSpan) { 
  19.             if (typeof(curEle)=="object") {
  20.                 if (curEle.getAttribute("vert")==null || curEle.getAttribute("vert")=="false") { curEle.setAttribute("vert", "true"); color = vertColor; } else { curEle.setAttribute("vert", "false"); color=""; }
  21.                 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; }
  22.             }
  23.         }
  24.         blnColSpan = false;
  25.     }
  26. }
  27.  
  28. function horzClick(row, tbl) {
  29.     var color="";
  30.     var table = document.getElementById(tbl);
  31.     var entireRow=table.getElementsByTagName("tr")[row-1];
  32.     var tds = entireRow.getElementsByTagName("td");
  33.     for (i=1; i<tds.length; i++) {
  34.         curEle = tds[i];
  35.         if (curEle.getAttribute("horz")==null || curEle.getAttribute("horz")=="false") { curEle.setAttribute("horz", "true"); color = horzColor; } else { curEle.setAttribute("horz", "false"); color=""; }
  36.         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;  }
  37.     }
  38. }
  39. </script>
  40. <STYLE>
  41. tr { cursor: pointer; }
  42. table { border-collapse: collapse; width: 100%; height: 100%;}
  43. </STYLE>
  44. <table border=1>
  45. <tbody id="example">
  46. <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
  47. <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
  48. <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
  49. <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
  50. <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
  51. <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
  52. <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
  53. <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
  54. <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
  55. <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
  56. <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
  57. <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
  58. <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
  59. <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
  60. <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
  61.  
  62. </tbody>
  63. </table>
  64.  
  65.  



ronverdonk's Avatar
Moderator
  
Join Date: Jul 2006
Location: The Netherlands
Posts: 4,139
#2   Sep 20 '07

re: Table Highlighting On Click

Good show!

Ronald
Member
  
Join Date: Nov 2006
Posts: 53
#3   Nov 28 '07

re: Table Highlighting On Click

Another way of doing it

file: js
Expand|Select|Wrap|Line Numbers
  1. window.onload = function() {
  2. tableOne = new hightlightTable("myTable")
  3. }
  4.  
  5. function hightlightTable(tableId) {
  6. this.table = document.getElementById(tableId)
  7. this.rows = this.table.tBodies[0].getElementsByTagName("tr")
  8. this.cells = this.table.tBodies[0].getElementsByTagName("td")
  9.  
  10.     for (x=0; x<this.cells.length; x++) {
  11.     this.cells[x].hightlight = this
  12.     this.cells[x].onclick = function() { this.hightlight.selectCell(this) }
  13.     }
  14. }
  15.  
  16. hightlightTable.prototype.selectCell = function(cell) {
  17. this.cellIndex = cell.cellIndex
  18. this.rowIndex = cell.parentNode.rowIndex-1
  19.  
  20.     for (x=0; x<this.rows.length; x++) {        
  21.         for (y=0; y<this.rows[x].cells.length; y++) {
  22.         this.rows[x].cells[y].className = ""
  23.             if (x == this.rowIndex) {
  24.             this.rows[x].cells[y].className = "cross"
  25.             }
  26.         }
  27.         this.rows[x].cells[this.cellIndex].className = "cross"
  28.     }
  29.  
  30. cell.className = "intersection"
  31. }
  32.  
file: css
Expand|Select|Wrap|Line Numbers
  1. table {width:760px; border-collapse:collapse; table-layout:fixed; font:normal 11px arial; border:1px solid #aaa;}
  2. table th {background:#40478E; color:#fff;}
  3. table td {border:1px solid #ddd; text-indent:5px; cursor:pointer}
  4. table tr.hover td {background:#E0F1F8}
  5.  
  6. .cross {background:#D0EAD6}
  7. .intersection {background:#347443; color:#fff; font-weight:bold}
  8.  
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's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#4   Nov 30 '07

re: Table Highlighting On Click

Quote:

Originally Posted by Romulo NF

Another way of doing it

Nice and unobtrusive.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#5   Nov 30 '07

re: Table Highlighting On Click

Quote:

Originally Posted by iam_clint

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

« previous insight | next insight »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,510 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved