Javascript can highlight the rows and columns of a table. _ javascript skills

The rows and columns of the table can be highlighted, and clicking a cell will show a different performance... 1. Cross-highlighted
2. Click "1; 1", "2; 2" in the upper left corner to observe the changes of all cell values.
3. Click "3", "4" in the upper left corner to observe the font changes of all cells.
4. After you click a cell, the color of the cell changes until you click the next cell.
5. Separate th from td;
Gu Laicheng, 2008.12.25


Cross-highlighted display







{
Document. writeln ("


{
Document. writeln ("
{
Document. writeln ("




ScriptVar Nrow = 15, Ncol = 12;Document. writeln (" ");For (var c = 0; c ");}Document. writeln (" ");For (var r = 0; r ");For (var c = 0; c ");}Document. writeln (" ");}Script

F "+ (c + 1) +"
"+ (R + 1) +"; "+ (c + 1) +"

Script
Var currentRow, currentCol;
Table3.rows [1]. cells [0]. onclick = function () {init (0 );}
Table3.rows [2]. cells [1]. onclick = function () {init (1 );}
Table3.rows [3]. cells [2]. onclick = function () {ccssty (0 );}
Table3.rows [4]. cells [3]. onclick = function () {ccssty (1 );}
Table3.rows [1]. cells [0]. style. cursor = "hand"
Table3.rows [2]. cells [1]. style. cursor = "hand"
Table3.rows [3]. cells [2]. style. cursor = "hand"
Table3.rows [4]. cells [3]. style. cursor = "hand"
Table3.onmouseover = new Function ("var d = 'over'; moveit (d );");
Table3.onmouseout = new Function ("var d = 'out'; moveit (d );");
Table3.onclick = clickit;
Init (0 );
Function get_Element (the_ele, the_tag ){
The_tag = the_tag.toLowerCase ();
If (the_ele.tagName.toLowerCase () = the_tag) return the_ele;
While (the_ele = the_ele.offsetParent ){
If (the_ele.tagName.toLowerCase () = the_tag) return the_ele;
}
Return (null );
}
Function setHorizontal (r, c, cn)
{
For (var I = 0; I {
Table3.rows [r]. cells [I]. className = cn;
}
}
Function setVertical (r, c, cn)
{
For (var I = 1; I {
Table3.rows [I]. cells [c]. className = cn;
}
}
Function clickit (){
If (currentRow = 0)
{
Return;
}
Var cl = parseInt (clickl. innerText ),
Cc = parseInt (clickc. innerText );
If (cl + ""! = "NaN" & cc + ""! = "NaN "){
SetVertical (currentRow, cc-1, "outit ");
SetHorizontal (cl, currentCol, "outit ");
}
// Vertical Cells
SetVertical (currentRow, currentCol-1, "clkit ");
// Horizontal Cells
SetHorizontal (currentRow, currentCol-1, "clkit ");
// The color at the cross point
Table3.rows [currentRow]. cells [currentCol-1]. className = "clkcr ";
Clickl. innerText = currentRow + "/" + Nrow
Clickc. innerText = currentCol + "/" + Ncol
Window. status = "Click on" + currentRow + "," + currentCol;
}
Function moveit (dir ){
Var the_obj = event. srcElement;
If (the_obj.tagName.toLowerCase () = "table") return;
If (the_obj.tagName.toLowerCase () = "th ")
{
Var the_td = get_Element (the_obj, "th ");
} Else
{
Var the_td = get_Element (the_obj, "td ");
}
Var the_tr = the_td.parentElement;
CurrentRow = the_tr.rowIndex;
CurrentCol = the_td.cellIndex + 1;
// Vertical Cells
SetVertical (currentRow, currentCol-1, (dir = "over ")? "Ovrit": "outit ");
// Do not set horizontal cells when the cursor is on TH
If (currentRow> 0)
{
// Horizontal Cells
SetHorizontal (currentRow, currentCol-1, (dir = "over ")? "Ovrit": "outit ");
// The color at the cross point
The_tr.cells [currentCol-1]. className = (dir = "over ")? "Cross": "outit ";
Var cl = parseInt (clickl. innerText ),
Cc = parseInt (clickc. innerText );
If (cl + ""! = "NaN" & cc + ""! = "NaN "){
Table3.rows [cl]. cells [cc-1]. className = "clkcr ";
}
}
Cline. innerText = currentRow + "/" + Nrow
Ccell. innerText = currentCol + "/" + Ncol
}
Function init (f ){
Var val = new Array ();
Var the_obj = event. srcElement;
Var ii = jj = 0;
Var the_table = get_Element (the_obj, "table ");
Ii = the_table.rows.length;
Jj = the_table.rows [0]. cells. length
For (I = 1; I For (j = 0; j The_table.rows [I]. cells [j]. innerText = (f = 0 )? ("" + (I-1) * jj + j + 1) :( "" + I + ";" + (j + 1 ));
}
}
}
Function ccssty (flag ){
Var the_obj = event. srcElement;
Var the_table = get_Element (the_obj, "table ");
If (flag = 0)
The_table.style.cssText = "PADDING-RIGHT: 0px; MARGIN-TOP:-3px; PADDING-LEFT: 0px; FONT-SIZE: 14px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 710px; COLOR: blue; PADDING-TOP: 0px; FONT-FAMILY:; HEIGHT: 11px ";
If (flag = 1)
The_table.style.cssText = "PADDING-RIGHT: 0px; MARGIN-TOP:-3px; PADDING-LEFT: 0px; FONT-SIZE: 14px; MARGIN-BOTTOM: 2px; PADDING-BOTTOM: 2px; OVERFLOW: hidden; WIDTH: 710px; COLOR: # AAAA00; PADDING-TOP: 0px; FONT-FAMILY:; HEIGHT: 11px ";
}
Script
Current row:

Current column:

Click the row:

Click column: