JavaScript 表格高亮类的应用[高级]

</p> <p><title><a href="https://kunjuke.com/tag/292/" title="表格" target="_blank">表格</a><a href="https://kunjuke.com/tag/194/" title="高亮" target="_blank">高亮</a></title> </p> <p> * {<br /> font-size: 11px;<br /> font-family: verdana, arial, sans-serif;<br /> } </p> <p> table {<br /> border: 1px solid #ccc;<br /> margin: 0 auto;<br /> } </p> <p> th {<br /> background-color: #f7f7f7;<br /> } </p> <p> td, th {<br /> padding: 15px;<br /> border: 1px solid #ccc;<br /> } </p> <p> tr.alternate {<br /> background-color: #efd;<br /> } </p> <p> .bold {<br /> font-weight: bold;<br /> } </p> <p> .red {<br /> color: red;<br /> font-weight: bold;<br /> } </p> <p> .blue {<br /> background-color: blue;<br /> } </p> <p> /* used with crosshairs.js */<br /> .hoverhilight {<br /> background-color: #ffffc0;<br /> cursor: pointer;<br /> } </p> <p> .activecellhilight {<br /> background-color: #c0dbff;<br /> color: blue;<br /> } </p> <p> var hilightclass = "hoverhilight";<br /> var activehilightclass = "activecellhilight"; </p> <p>var hilightactive = 1;<br /> var hilightcol = 1;<br /> var hilightrow = 1;<br /> var hilighttopheader = 0;<br /> var hilightleftheader = 0;<br /> var hilightrightheader = 0;<br /> var hilightbottomheader = 0;<br /> var surroundactive = 0;<br /> function initcrosshairstable(id, toppad, rightpad, bottompad, leftpad) {<br /> var tableobj = document.getelementbyid(id);<br /> var c = tableobj.rows[0].cells.length - rightpad;<br /> var r = tableobj.rows.length - bottompad; </p> <p> for (var i = toppad; i < r; i++)<br /> {<br /> for (var j = leftpad; j < c; j++)<br /> {<br /> if(!document.all) {<br /> tableobj.rows[i].cells[j].setattribute("onmouseover","addhilight(this);");<br /> tableobj.rows[i].cells[j].setattribute("onmouseout","removehilight(this);");<br /> }<br /> else<br /> {<br /> tableobj.rows[i].cells[j].onmouseover = function() { addhilight(this); }<br /> tableobj.rows[i].cells[j].onmouseout = function() { removehilight(this); }<br /> }<br /> }<br /> }<br /> }<br /> function addhilight(cell)<br /> {<br /> applyhilight(cell.parentnode.parentnode.parentnode,<br /> cell.parentnode.rowindex, cell.cellindex, 1);<br /> }<br /> function removehilight(cell)<br /> {<br /> applyhilight(cell.parentnode.parentnode.parentnode,<br /> cell.parentnode.rowindex, cell.cellindex, 0);<br /> }<br /> var oldrowclasses = "";<br /> var oldheaderclasses = "";<br /> var oldcellclasses = new array();<br /> function applyhilight(obj, rowindex, colindex, state)<br /> { </p> <p> var w3cdom = (document.createelement && document.getelementsbytagname);<br /> if (!w3cdom)<br /> {<br /> alert("this script requires w3c dom support")<br /> return;<br /> }<br /> if (hilightclass == "") alert("please set a hilight class.");<br /> if (hilightrow) applyhilightrow(obj, rowindex, colindex, state);<br /> if (hilightcol) applyhilightcol(obj, rowindex, colindex, state);<br /> if (hilighttopheader) applyhilighttopheader(obj, rowindex, colindex, state);<br /> if (hilightleftheader) applyhilightleftheader(obj, rowindex, colindex, state);<br /> if (hilightrightheader) applyhilightrightheader(obj, rowindex, colindex, state);<br /> if (hilightbottomheader) applyhilightbottomfooter(obj, rowindex, colindex, state);<br /> if (hilightactive) applyhilightactivecell(obj, rowindex, colindex, state); </p> <p> if (surroundactive) applysurroundactivehilight(obj, rowindex, colindex, state);<br /> }<br /> function applyhilightleftheader(obj, rowindex, colindex, state)<br /> {<br /> var classarray;<br /> var rowclasses = ""; </p> <p> if (state == 1)<br /> {<br /> obj.rows[rowindex].cells[0].classname += " " + hilightclass;<br /> }<br /> else<br /> {<br /> classarray = obj.rows[rowindex].cells[0].classname.split(" ");<br /> for(var i = 0; i < (classarray.length - 1); i++)<br /> if(classarray[i] != "") rowclasses += " " + classarray[i];<br /> obj.rows[rowindex].cells[0].classname = rowclasses;<br /> }<br /> }<br /> function applyhilightrightheader(obj, rowindex, colindex, state)<br /> {<br /> var classarray;<br /> var rowclasses = ""; </p> <p> if (state == 1)<br /> {<br /> obj.rows[rowindex].cells[obj.rows[rowindex].cells.length-1].classname += " " + hilightclass;<br /> }<br /> else<br /> {<br /> classarray = obj.rows[rowindex].cells[obj.rows[rowindex].cells.length-1].classname.split(" ");<br /> for(var i = 0; i < (classarray.length - 1); i++)<br /> if(classarray[i] != "") rowclasses += " " + classarray[i];<br /> obj.rows[rowindex].cells[obj.rows[rowindex].cells.length-1].classname = rowclasses;<br /> }<br /> }<br /> function applyhilighttopheader(obj, rowindex, colindex, state)<br /> {<br /> var classarray;<br /> var colclasses = ""; </p> <p> if (state == 1)<br /> {<br /> obj.rows[0].cells[colindex].classname += " " + hilightclass;<br /> }<br /> else<br /> {<br /> classarray = obj.rows[0].cells[colindex].classname.split(" ");<br /> for(var i = 0; i < (classarray.length - 1); i++)<br /> if(classarray[i] != "") colclasses += " " + classarray[i];<br /> obj.rows[0].cells[colindex].classname = colclasses;<br /> }<br /> }<br /> function applyhilightbottomfooter(obj, rowindex, colindex, state)<br /> {<br /> var classarray;<br /> var colclasses = ""; </p> <p> if (state == 1)<br /> {<br /> obj.rows[obj.rows.length-1].cells[colindex].classname += " " + hilightclass;<br /> }<br /> else<br /> {<br /> classarray = obj.rows[obj.rows.length-1].cells[colindex].classname.split(" ");<br /> for(var i = 0; i < (classarray.length - 1); i++)<br /> if(classarray[i] != "") colclasses += " " + classarray[i];<br /> obj.rows[obj.rows.length-1].cells[colindex].classname = colclasses;<br /> }<br /> }<br /> function applyhilightrow(obj, rowindex, colindex, state)<br /> {<br /> if (state == 1)<br /> {<br /> oldrowclasses = obj.rows[rowindex].classname;<br /> obj.rows[rowindex].classname = hilightclass;<br /> }<br /> else<br /> {<br /> obj.rows[rowindex].classname = oldrowclasses;<br /> }<br /> }<br /> function applyhilightcol(obj, rowindex, colindex, state)<br /> {<br /> var cellclasses = new array(); </p> <p> if (state == 1)<br /> {<br /> for(var i = 0; i < obj.rows.length; i++)<br /> {<br /> cellclasses.push(obj.rows[i].cells[colindex].classname);<br /> obj.rows[i].cells[colindex].classname += " " + hilightclass;<br /> } </p> <p> oldcellclasses = cellclasses;<br /> }<br /> else<br /> {<br /> oldcellclasses.reverse();<br /> for(var i = 0; i < obj.rows.length; i++)<br /> obj.rows[i].cells[colindex].classname = oldcellclasses.pop();<br /> }<br /> } </p> <p>var oldactivecellclasses; </p> <p>function applyhilightactivecell(obj, rowindex, colindex, state)<br /> {<br /> if (state == 1)<br /> {<br /> oldactivecellclasses = null;<br /> oldactivecellclasses = obj.rows[rowindex].cells[colindex].classname;<br /> obj.rows[rowindex].cells[colindex].classname += " " + activehilightclass;<br /> }<br /> else<br /> {<br /> var oldclasses = oldactivecellclasses.split(" ");<br /> obj.rows[rowindex].cells[colindex].classname = ""; </p> <p> for(var i = 0; i < oldclasses.length; i++)<br /> {<br /> if(oldclasses[i] != hilightclass) obj.rows[rowindex].cells[colindex].classname += " " + oldclasses[i];<br /> oldactivecellclasses = "";<br /> }<br /> }<br /> } </p> <p>function applysurroundactivehilight(obj, rowindex, colindex, state)<br /> { </p> <p> var surroundradius = 1;<br /> var radiuscolor = "#c0dbff"<br /> var cell; </p> <p> if(!parseint(surroundradius)) return; </p> <p> if (state == 1)<br /> {<br /> for(var i = (rowindex - surroundradius); i <= (rowindex + surroundradius); i++)<br /> {<br /> if (i < 0) continue;<br /> if (!obj.rows[i]) continue; </p> <p> for(var j = (colindex - surroundradius); j <= (colindex + surroundradius); j++)<br /> {<br /> if (j < 0) continue;<br /> if (!obj.rows[i].cells[j]) continue; </p> <p> cell = obj.rows[i].cells[j].style<br /> cell.backgroundcolor = radiuscolor;<br /> cell.opacity = (.5);<br /> cell.mozopacity = (.5);<br /> cell.khtmlopacity = (.5);<br /> cell.filter = "alpha(opacity=50)";<br /> }<br /> } </p> <p> obj.rows[rowindex].cells[colindex].style.backgroundcolor = "";<br /> }<br /> else<br /> {<br /> for(var i = (rowindex - surroundradius); i <= (rowindex + surroundradius); i++)<br /> {<br /> if (i < 0) continue;<br /> if (!obj.rows[i]) continue; </p> <p> for(var j = (colindex - surroundradius); j <= (colindex + surroundradius); j++)<br /> {<br /> if (j < 0) continue;<br /> if (!obj.rows[i].cells[j]) continue; </p> <p> cell = obj.rows[i].cells[j].style<br /> cell.backgroundcolor = "";<br /> cell.opacity = (1);<br /> cell.mozopacity = (1);<br /> cell.khtmlopacity = (1);<br /> cell.filter = "alpha(opacity=100)";<br /> }<br /> }<br /> }<br /> } </p> <table id="crosstable"> <tr> <th> </th> <th>编号</th> <th>姓名</th> <th>地址</th> <th>电话</th> </tr> <tr> <td class="bold">1</td> <td>a1</td> <td>b1</td> <td>c1</td> <td>d1</td> </tr> <tr class="alternate"> <td class="bold">2</td> <td>a2</td> <td>b2</td> <td>c2</td> <td>d2</td> </tr> <tr> <td class="bold">3</td> <td>a3</td> <td>b3</td> <td>c3</td> <td>d3</td> </tr> <tr class="alternate"> <td class="bold">4</td> <td>a4</td> <td>b4</td> <td>c4</td> <td>d4</td> </tr> <tr> <td class="bold">5</td> <td>a5</td> <td>b5</td> <td>c5</td> <td>d5</td> </tr> </table> <p>initcrosshairstable("crosstable", 1, 0, 0, 1);//控制 </p> <p>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]