COOL而实用的动态效果_时间日期-jsチュートリアル-php.cn

COOL而实用的动态效果_时间日期

WBOY

リリース： 2016-05-16 19:27:40

オリジナル

907 人が閲覧しました

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

PS:

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

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

<p>

</p>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>calendar</title>
<p><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;
}</style></p>
<p>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;}