COOL而实用的动态效果

网络编程 2025/1/24 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

最近在做项目的时候，客户要求表格里的数据可以拖选，于是用JS写了个下面的方法。支持IE、FIREFOX等浏览器。实现对整行、整列数据的选取，全选、反选、清除，在数据表格内拖拉出的矩形范围的单元格数据全选。

PS:

1.如果数据单元格没有数据，请将ID设为空或去掉ID，样式为"inactive".则选择时会跳过此单元格。

2.如果不想某个单元格被选，请将class设为“bg_green”,则选择时会跳过此单元格。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>calendar</title>
<style type="text/css">/*button style*/.button{ padding: 2px; color: #F5F5F5; background-color: #3665A5; border-width: 1px 2px 2px 1px; border-color: #D2D2D2 #305B93 #305B93 #D2D2D2; border-style: solid; font: bold 14px verdana;}
body,td{margin:0;font:12px verdana;cursor:default;}#ca td{/*width:20px;height:25px;*/border-right:1px solid;border-bottom:1px solid;text-align:center;}.daysTitle td{border-right:1px solid #A6D2FF;text-align:center;font-weight:bold;}.font_red{color:red;}.monthsTitle td{border-bottom:1px solid #A6D2FF;text-align:center;color:#fafafa;}.bg_red{background-color:#FF0000;color:#FFFFCC; border-color:#FFCCCC;}.bg_green{background-color:#00CC00;}.inactive{background-color:#E1F0FF; border-color:#A6D2FF;}.noData{background-color:#ccc; border-color:#999;}</style></head>
<body> <INPUT class=button type=submit value=" < " name=Submit3> 2006 <INPUT class=button type=submit value=" > " name=Submit4> 
 
 M T W
 T F S S
 M T W T
 F S S M
 T W T F
 S S M T
 W T F S
 S M T W
 T F S S
 M T W T
 F S S 
 
 Jan Feb
 Mar 
 Apr May 
 Jun Jul
 Aug 
 Sep Oct 
 Nov Dec
 
 
 
 <input name="Submit" type="button" class="button" onClick="selectAll(true)" value="Select All"> <input name="Submit" type="button" class="button" onClick="resetAll()" value="Reset All"> <input name="Submit" type="button" class="button" onClick="selectAll(false)" value="Reverse Select"> 
</body></html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

COOL而实用的动态效果

标签：

COOL而实用的动态效果

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“COOL而实用的动态效果”

暂无COOL而实用的动态效果的评论...

更新日志

2025年01月24日

COOL而实用的动态效果

COOL而实用的动态效果

不错显示时间特效

非常酷的有农历的日历挂历!

评论“COOL而实用的动态效果”

更新日志

友情链接