js COL能很好的控制表格的列 时间:2020-05-12 人气:0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- .color1 { background-color: #CCFF99; } td { border-top-width: 1px; border-right-width: 1px; border-top-style: solid; border-right-style: solid; border-top-color: #CCFF33; border-right-color: #CCFF33; } table { border-bottom-style: solid; border-left-style: solid; border-bottom-color: #CCFF33; border-left-color: #CCFF33; border-bottom-width: 1px; border-left-width: 1px; } --> </style> </head> <body> <table width="300" cellpadding="0" cellspacing="0" id="tab1"> <colgroup> <col /><col /><col /><col /><col /><col /><col /><col /><col /><col /> </colgroup> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html> <script language="javascript" type="text/javascript"> var $ = function(pId){ return document.getElementById(pId); } var oCols =document.getElementsByTagName("COL"); var oTab = $("tab1"); oTab.onmouseover = function(evt){ evt = evt || window.event; var o = evt.target || evt.srcElement; if(o.tagName == "TD"){ oCols[o.cellIndex].className = "color1"; o.parentNode.className = "color1"; } } oTab.onmouseout = function(evt){ evt = evt || window.event; var o = evt.target || evt.srcElement; if(o.tagName == "TD"){ oCols[o.cellIndex].className = ""; o.parentNode.className = ""; } } </script> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 加载全部内容