471,071 Members | 1,500 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes and contribute your articles to a community of 471,071 developers and data experts.

Table Highlighting On Click

iam_clint
1,208 Expert 1GB
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.  
Sep 18 '07 #1
4 4268
ronverdonk
4,258 Expert 4TB
Good show!

Ronald
Sep 20 '07 #2
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]
Nov 28 '07 #3
acoder
16,027 Expert Mod 8TB
Another way of doing it
Nice and unobtrusive.
Nov 30 '07 #4
acoder
16,027 Expert Mod 8TB
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.
Nov 30 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

7 posts views Thread by Jon Combe | last post: by
4 posts views Thread by Bob hotmail.com> | last post: by
14 posts views Thread by > Adrian | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.