COOL而实用的动态效果

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

PS:

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

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

calendar

/*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;}

/******************************************************************
此代码为FLYINGFISH原创，你可以免费使用，修改完善。但作为对作者和对你自己的尊重，务必保留此原始版权信息，
DESIGNED BY： flyingfish
WEB SITE: www.yu5911.cn
EMAIL:penglongxiang@gmail.com
QQ: 55856710

******************************************************************/

Array.prototype.remove = function(index){
if(isNaN(index)||(index>=this.length)||(index

Array.prototype.del=function(n) { //n表示第几项，从0开始算起。
//prototype为对象原型，注意这里为对象增加自定义方法的方法。
if(n

Array.prototype.indexOf = function(value){
for(var i=0;i

Array.prototype.contains = function(value){
return this.indexOf(value)>=0;
}

Array.prototype.clear = function(){
while(this.length>0) this.remove(this.length-1);
}

Array.prototype.add = function(index,value){
if(value==undefined) this.put(index);
else{
var len = this.length;
this.push(this[len-1]);
for(var i=len-1;i>index;i--) this[i] = this[i-1];
this[index] = value;
}
}

Array.prototype.put = function(value){
if(!this.contains(value)) this.push(value);
}

Array.prototype.circle = function(degressive){
if(degressive){
var a = this[0];
for(var i=0;i0;i--) this[i] = this[i-1];
this[0] = a;
}
}
var selectedID = new Array()
var months,days,temp_m,temp_d,temp_m1,temp_d1,isSelected=false,datedata="";

//document.write('

'
}
datedata =datedata +'

'
}
datedata = '

"
//document.write('

')

function selectDate(startM,endM,startD,endD){
for(m = startM;m共选中"+selectedID.length+"个数据"+selectedID;
}
function selectAll(v){
if(v){
resetAll();
selectDate(1,months,1,days)
}else{
selectDate(1,months,1,days)
}
}
function resetAll(){
if(selectedID.length>0){
for(k=1;k共选中"+selectedID.length+"个数据"+selectedID;
}
}
function selectMonth(month){
month = month.parentNode.rowIndex+1
selectDate(month,month,1,days)
}
function selectDay(day){
day = day.cellIndex + 1;
selectDate(1,months,day,day)
}

window.onload=function ()
{
dayObj = document.getElementById("days");
monthObj = document.getElementById("months")
days = dayObj.rows[0].cells.length //get days
months = monthObj.rows.length // get Months
var obj=document.getElementById("dataTable");
var eventObj;
//creatDateData
document.getElementById("dataTable").innerHTML=datedata

//document.body.innerText=document.body.innerHTML

obj.onmousedown=function(event)
{
if(event == null){
event = window.event; // For IE
}
var eventObj = event.srcElement? event.srcElement : event.target; // IE use srcElement, Firefox use target
if(eventObj.tagName=="td"||eventObj.tagName=="TD")
{
xy=eventObj.getAttribute("name").split("d");
temp_d=parseInt(xy[1])
temp_m=parseInt(xy[0].split("m")[1])
selectDate(temp_m,temp_m,temp_d,temp_d)
}
}

obj.onmouseup=function(event)
{
if(event == null){
event = window.event; // For IE
}
var eventObj = event.srcElement? event.srcElement : event.target; // IE use srcElement, Firefox use target
if(eventObj.tagName=="td"||eventObj.tagName=="TD")
{
xy=eventObj.getAttribute("name").split("d");
temp_d1=parseInt(xy[1])
temp_m1=parseInt(xy[0].split("m")[1])
sM=temp_m

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]