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

时间：2022-03-24 11:36:01|栏目：JavaScript代码|点击：次

<!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>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>    </tr>    <tr>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>    </tr>    <tr>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>    </tr>    <tr>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>    </tr>    <tr>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>    </tr>    <tr>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>    </tr>    <tr>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>    </tr>    <tr>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>    </tr>    <tr>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>    </tr>    <tr>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</td>      <td>&nbsp;</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需再刷新一下页面才能执行]

上一篇：微信小程序实现简易计算器

栏目：JavaScript代码

下一篇：JS+CSS简单树形菜单实现方法

本文标题：js COL能很好的控制表格的列

本文地址：http://www.codeinn.net/misctech/197137.html

更多JavaScript代码

JavaScript代码

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

阅读排行

推荐教程