表格中点击单元格,选中所在的行及列,并改变样式.docx

表格中点击单元格，选中所在的行及列，并改变样式body margin:0; padding:0; background:#f1f1f1; color:#555; line-height:150%; text-align:left; a text-decoration:none; color:#057fac; a:hover text-decoration:none; color:#999; h1 font-size:140%; margin:0 20px; line-height:80px; #container margin:0 auto; width:680px;#content margin:0 20px; table, tdfont:88% Arial, Helvetica, sans-serif; tablewidth:100%;border-collapse:collapse;margin:1em 0;th, tdtext-align:center;padding:0.5em;border:1px solid #fff;thbackground:#328aa4 url(tr_back.gif) repeat-x;color:#fff;tdbackground:#e5f1f4;/* tablecloth styles */tr.even tdbackground:#e5f1f4;tr.odd tdbackground:#f8fbfc;th.over, tr.even th.over, tr.odd th.overbackground:#4a98af;th.down, tr.even th.down, tr.odd th.downbackground:#bce774;th.selected, tr.even th.selected, tr.odd th.selectedtd.over, tr.even td.over, tr.odd td.overbackground:#ecfbd4;td.down, tr.even td.down, tr.odd td.downbackground:#bce774;color:#fff;td.selected, tr.even td.selected, tr.odd td.selectedbackground:#bce774;color:#555;/* use this if you want to apply different styleing to empty table cells*/td.empty, tr.odd td.empty, tr.even td.emptybackground:#fff;this.tablecloth = function()/ CONFIG / if set to true then mouseover a table cell will highlight entire column (except sibling headings)var highlightCols = true;/ if set to true then mouseover a table cell will highlight entire row(except sibling headings)var highlightRows = true;/ if set to true then click on a table sell will select row or column based on configvar selectable = true;/ this function is called when / add your own code if you want to add action / function receives object that has been clicked this.clickAction = function(obj)/alert(obj.innerHTML);/ END CONFIG (do not edit below this line)var tableover = false;this.start = function()var tables = document.getElementsByTagName(table);for (var i=0;itables.length;i+)tablesi.onmouseover = function()tableover = true;tablesi.onmouseout = function()tableover = false;rows(tablesi);this.rows = function(table)var css = ;var tr = table.getElementsByTagName(tr);for (var i=0;itr.length;i+)css = (css = odd) ? even : odd;tri.className = css;var arr = new Array();for(var j=0;jtri.childNodes.length;j+)if(tri.childNodesj.nodeType = 1) arr.push(tri.childNodesj);for (var j=0;jarr.length;j+)arrj.row = i;arrj.col = j;if(arrj.innerHTML =   | arrj.innerHTML = ) arrj.className += empty;arrj.css = arrj.className;arrj.onmouseover = function()over(table,this,this.row,this.col);arrj.onmouseout = function()out(table,this,this.row,this.col);arrj.onmousedown = function()down(table,this,this.row,this.col);arrj.onmouseup = function()up(table,this,this.row,this.col);arrj.onclick = function()click(table,this,this.row,this.col);/ appyling mouseover state for objects (th or td)this.over = function(table,obj,row,col)if (!highlightCols & !highlightRows) obj.className = obj.css + over; if(check1(obj,col)if(highlightCols) highlightCol(table,obj,col);if(highlightRows) highlightRow(table,obj,row);/ appyling mouseout state for objects (th or td)this.out = function(table,obj,row,col)if (!highlightCols & !highlightRows) obj.className = obj.css; unhighlightCol(table,col);unhighlightRow(table,row);/ appyling mousedown state for objects (th or td)this.down = function(table,obj,row,col)obj.className = obj.css + down; ;/ appyling mouseup state for objects (th or td)this.up = function(table,obj,row,col)obj.className = obj.css + over; ;/ onclick event for objects (th or td)this.click = function(table,obj,row,col)if(check1)if(selectable) unselect(table);if(highlightCols) highlightCol(table,obj,col,true);if(highlightRows) highlightRow(table,obj,row,true);document.onclick = unselectAll;clickAction(obj); ;this.highlightCol = function(table,active,col,sel)var css = (typeof(sel) != undefined) ? selected : over;var tr = table.getElementsByTagName(tr);for (var i=0;itr.length;i+)var arr = new Array();for(j=0;jtri.childNodes.length;j+)if(tri.childNodesj.nodeType = 1) arr.push(tri.childNodesj);var obj = arrcol;if (check2(active,obj) & check3(obj) obj.className = obj.css + + css; ;this.unhighlightCol = function(table,col)var tr = table.getElementsByTagName(tr);for (var i=0;itr.length;i+)var arr = new Array();for(j=0;jtri.childNodes.length;j+)if(tri.childNodesj.nodeType = 1) arr.push(tri.childNodesj);var obj = arrcol;if(check3(obj) obj.className = obj.css; ;this.highlightRow = function(table,active,row,sel)var css = (typeof(sel) != undefined) ? selected : over;var tr = table.getElementsByTagName(tr)row;for (var i=0;itr.childNodes.length;i+)var obj = tr.childNodesi;if (check2(active,obj) & check3(obj) obj.className = obj.css + + css; ;this.unhighlightRow = function(table,row)var tr = table.getElementsByTagName(tr)row;for (var i=0;itr.childNodes.length;i+)var obj = tr.childNodesi;if(check3(obj) obj.className = obj.css; ;this.unselect = function(table)tr = table.getElementsByTagName(tr)for (var i=0;itr.length;i+)for (var j=0;jtri.childNodes.length;j+)var obj = tri.childNodesj;if(obj.className) obj.className = obj.className.replace(selected,);this.unselectAll = function()if(!tableover)tables = document.getElementsByTagName(table);for (var i=0;itables.length;i+)unselect(tablesi);this.check1 = function(obj,col)return (!(col = 0 & obj.className.indexOf(empty) != -1);this.check2 = function(active,obj)return (!(active.tagName = TH & obj.tagName = TH); ;this.check3 = function(obj)return (obj.className) ? (obj.className.indexOf(selected) = -1) : true; ;start();/* script initiates on page load. */