js COL能很好的控制表格的列

2019-11-21 01:47:23

字體：大中小

來源：轉載

供稿：網友

<!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">    </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需刷新才能執行]

上一篇：readonly和disabled的區別

下一篇：JS動畫效果代碼3