繁体中文
设为首页
加入收藏
资讯中心
网络编程
数据库
脚本专栏
实用技巧
软件编程
网页制作
操作系统
经典网摘
网站技巧
免费资源
关于我们
文章搜索
主机租用
域名查询
基础知识
应用技巧
表单特效
广告代码
网页特效
黑客性质
页面导航：
首页
→
网络编程
→
JavaScript
→
应用技巧
→ 正文内容 js COL 控制表格
js COL能很好的控制表格的列
发布：dxy 字体：[
增加
减小
] 类型：转载
由于没有用循环,所以,速度要相对快些.但是IE下,明显示不如FF下好用.
点击运行可以看到效果:
<!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 全选 提示:你可先修改部分代码,再按运行]
Tags：
js
COL
控制表格
百度中搜索更多的关于
js COL能很好的控制表格的列
内容，或者
用Google搜索相关更多
浏览次数：
载入中...
打印本文
关闭本文
返回首页
0
顶一下
上一篇文章：
JS动画效果代码3
下一篇文章：
JavaScript的9个陷阱及评点分析
文章评论
共有
位脚本之家网友发表了评论
我来说两句
同 类 文 章
键盘元素的控制小方块的移动效果
漂亮的widgets，支持换肤和后期开发新皮肤
List the Codec Files on a Computer
document.getElementById的一些细节
利用ASP发送和接收XML数据的处理方法与代
jser必看的破解javascript各种加密的反向
论坛特效代码收集（落伍转发-不错）
记录几个javascript有关的小细节
Save a File Using a File Save Dialog B
js 替换
最 近 更 新
用javascript实现给出的盒子的序列是否可
$$()函数应用实例
js使用对象直接量创建对象的代码
动态加载js文件 document.createElement
漂亮的widgets，支持换肤和后期开发新皮肤
通过JAVAScript实现页面自适应
用roll.js实现的图片自动滚动+鼠标触动的
javascript 控制超级链接的样式代码
js实现的点击超链显示隐藏层
Packer 3.0 JS压缩及混淆工具 下载
热 点 排 行
Div+CSS+JS树型菜单，可刷新
在线游戏大家来找茬II
eval(function(p,a,c,k,e,d)系列
javascript小技巧 超强推荐
动态加载js文件 document.create
Unicode 编码转换器
彻底搞懂JS无缝滚动代码
JavaScript实现Sleep函数的代码
支持IE和FF的div＋css选项卡
由浅到深了解JavaScript类
文章评论
共有 位脚本之家网友发表了评论我来说两句