Highlight table row and column |
Highlight table row and column |
noodlygod |
Jan 29 2007, 04:16 PM
Post
#1
|
Group: Members Posts: 2 Joined: 29-January 07 Member No.: 1,716 |
Hello, I'm wondering if anyone knows of a method for highlighting an entire column as well as the row inside a table. For example, if I have a table that looks like this:
CODE <table border="1" cellspacing="0" cellpadding="4"> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> </tr> <tr> <td>Row 3, Column 1</td> <td>Row 3, Column 2</td> <td>Row 3, Column 3</td> </tr> </table> I'd like to have it look like this: In the event that Row 2,Column 2 were being moused over. Any thoughts would be appreciated. Thanks, -NoodlyGod |
Christian J |
Jan 29 2007, 05:49 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
See if this works (the script assumes that the table has the ID "highlight"):
CSS CODE .cur_row { color: #000; background: #FFE3B3; } .cur_col { color: #000; background: #FFF9B5; } .cur_cell { color: #000; background: #FDC743; } Javascript CODE window.onload=function() { init(); } function init() { var table=document.getElementById('highlight'); function highlight(row, col, state) { for(var i=0; i<table.rows.length; i++) { if(state=='off') { for(var j=0; j<table.rows[i].cells.length; j++) { table.rows[i].cells[j].className=''; } } if(state=='on') { table.rows[i].cells[col].className='cur_col'; } } for(var i=0; i<table.rows[row].cells.length; i++) { if(state=='on') { table.rows[row].cells[i].className='cur_row'; table.rows[row].cells[col].className='cur_cell'; } } } // end function highlight // detect cursor position for(var i=0; i<table.rows.length; i++) { table.rows[i].row_index=i; for(var j=0; j<table.rows[i].cells.length; j++) { table.rows[i].cells[j].column_index=j; table.rows[i].cells[j].onmouseover=function() { highlight(this.parentNode.row_index, this.column_index, 'on'); } table.rows[i].cells[j].onmouseout=function() { highlight(this.parentNode.row_index, this.column_index, 'off'); } } } } |
Brian Chandler |
Jan 29 2007, 11:03 PM
Post
#3
|
Jocular coder Group: Members Posts: 2,460 Joined: 31-August 06 Member No.: 43 |
|
noodlygod |
Jan 30 2007, 02:53 PM
Post
#4
|
Group: Members Posts: 2 Joined: 29-January 07 Member No.: 1,716 |
Hehe, yeah I was lazy with the paint bucket. That works like a charm, thanks a ton!
|
Lo-Fi Version | Time is now: 18th April 2024 - 03:24 PM |