js表格拖选动态效果COOL而实用
效果图：
PS:
1.如果数据单元格没有数据，请将ID设为空或去掉ID，样式为"inactive".则选择时会跳过此单元格。
2.如果不想某个单元格被选，请将class设为“bg_green”,则选择时会跳过此单元格。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 6 <title>calendar</title> 7 <style type="text/css"> 8 /*button style*/ 9 .button{ 10 padding: 2px; 11 color: #F5F5F5; 12 background-color: #3665A5; 13 border-width: 1px 2px 2px 1px; 14 border-color: #D2D2D2 #305B93 #305B93 #D2D2D2; 15 border-style: solid; 16 font: bold 14px verdana; 17 } 18 body,td{margin:0;font:12px verdana;cursor:default;} 19 #ca td{/*width:20px;height:25px;*/border-right:1px solid;border-bottom:1px solid;text-align:center;} 20 .daysTitle td{border-right:1px solid #A6D2FF;text-align:center;font-weight:bold;} 21 .font_red{color:red;} 22 .monthsTitle td{border-bottom:1px solid #A6D2FF;text-align:center;color:#fafafa;} 23 .bg_red{background-color:#FF0000;color:#FFFFCC; border-color:#FFCCCC;} 24 .bg_green{background-color:#00CC00;} 25 .inactive{background-color:#E1F0FF; border-color:#A6D2FF;} 26 .noData{background-color:#ccc; border-color:#999;} 27 </style> 28 <script language="javascript" type="text/javascript" src="array.js"></script> 29 </head> 30 <body> 31 <script type="text/javascript" language="javascript"> 32 /****************************************************************** 33 此代码为FLYINGFISH原创，你可以免费使用，修改完善。但作为对作者和对你自己的尊重，务必保留此原始版权信息， 34 DESIGNED BY： flyingfish 35 WEB SITE: www.yu5911.cn 36 EMAIL:penglongxiang@gmail.com 37 QQ: 55856710 38 ******************************************************************/ 39 Array.prototype.remove = function(index){ 40 if(isNaN(index)||(index>=this.length)||(index<0)) return false; 41 this.splice(index,1); 42 return true; 43 } 44 Array.prototype.del=function(n) { //n表示第几项，从0开始算起。 45 //prototype为对象原型，注意这里为对象增加自定义方法的方法。 46 if(n<0) //如果n<0，则不进行任何操作。 47 return this; 48 else 49 return this.slice(0,n).concat(this.slice(n+1,this.length)); 50 /* 51 concat方法：返回一个新数组，这个新数组是由两个或更多数组组合而成的。 52 这里就是返回this.slice(0,n)/this.slice(n+1,this.length) 53 组成的新数组，这中间，刚好少了第n项。 54 slice方法： 返回一个数组的一段，两个参数，分别指定开始和结束的位置。 55 */ 56 } 57 Array.prototype.indexOf = function(value){ 58 for(var i=0;i<this.length;i++){ 59 if(typeof(value.equals)=="function"){ 60 if(value.equals(this[i])) return i; 61 }else if(value==this[i]) return i; 62 } 63 return -1; 64 } 65 Array.prototype.contains = function(value){ 66 return this.indexOf(value)>=0; 67 } 68 Array.prototype.clear = function(){ 69 while(this.length>0) this.remove(this.length-1); 70 } 71 Array.prototype.add = function(index,value){ 72 if(value==undefined) this.put(index); 73 else{ 74 var len = this.length; 75 this.push(this[len-1]); 76 for(var i=len-1;i>index;i--) this[i] = this[i-1]; 77 this[index] = value; 78 } 79 } 80 Array.prototype.put = function(value){ 81 if(!this.contains(value)) this.push(value); 82 } 83 Array.prototype.circle = function(degressive){ 84 if(degressive){ 85 var a = this[0]; 86 for(var i=0;i<this.length-1;i++) this[i] = this[i+1]; 87 this[this.length-1] = a; 88 }else{ 89 var a = this[this.length-1]; 90 for(var i=this.length-1;i>0;i--) this[i] = this[i-1]; 91 this[0] = a; 92 } 93 } 94 var selectedID = new Array() 95 var months,days,temp_m,temp_d,temp_m1,temp_d1,isSelected=false,datedata=""; 96 //document.write('<table id="ca" onselectstart="return false" border="0" cellpadding="0" cellspacing="0">') 97 for(t=1;t<13;t++){ 98 datedata =datedata + '<tr>' 99 for(i=1;i<=42;i++){ 100 datedata =datedata +' <td width="20" height="25" id="m'+t+'d'+i+'" name="m'+t+'d'+i+'" class="inactive" >'+i+'</td>' 101 } 102 datedata =datedata +'</tr>' 103 } 104 datedata = '<table id="ca" onselectstart="return false" border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" >'+datedata+"</table>" 105 //document.write('</table>') 106 function selectDate(startM,endM,startD,endD){ 107 for(m = startM;m<=endM;m++){ 108 for(d = startD;d<=endD;d++){ 109 tid=document.getElementById("m"+m+"d"+d) 110 if(tid!=null){ 111 if(tid.className!="bg_green"){ 112 if(selectedID.indexOf("m"+m+"d"+d)!=-1){ 113 did =selectedID.indexOf("m"+m+"d"+d) 114 selectedID.remove(did) 115 tid.className="inactive" 116 }else{ 117 selectedID.put("m"+m+"d"+d) 118 tid.className="bg_red" 119 } 120 } 121 } 122 } 123 } 124 document.getElementById("report").innerHTML="<a style='color:red' >共选中"+selectedID.length+"个数据</a>"+selectedID; 125 } 126 function selectAll(v){ 127 if(v){ 128 resetAll(); 129 selectDate(1,months,1,days) 130 }else{ 131 selectDate(1,months,1,days) 132 } 133 } 134 function resetAll(){ 135 if(selectedID.length>0){ 136 for(k=1;k<=selectedID.length;k++){ 137 did=document.getElementById(selectedID[k-1]) 138 did.className="inactive"; 139 } 140 selectedID.clear(); 141 document.getElementById("report").innerHTML="<a style='color:red' >共选中"+selectedID.length+"个数据</a>"+selectedID; 142 } 143 } 144 function selectMonth(month){ 145 month = month.parentNode.rowIndex+1 146 selectDate(month,month,1,days) 147 } 148 function selectDay(day){ 149 day = day.cellIndex + 1; 150 selectDate(1,months,day,day) 151 } 152 window.onload=function () 153 { 154 dayObj = document.getElementById("days"); 155 monthObj = document.getElementById("months") 156 days = dayObj.rows[0].cells.length //get days 157 months = monthObj.rows.length // get Months 158 var obj=document.getElementById("dataTable"); 159 var eventObj; 160 //creatDateData 161 document.getElementById("dataTable").innerHTML=datedata 162 163 //document.body.innerText=document.body.innerHTML 164 165 obj.onmousedown=function(event) 166 { 167 if(event == null){ 168 event = window.event; // For IE 169 } 170 var eventObj = event.srcElement? event.srcElement : event.target; // IE use srcElement, Firefox use target 171 if(eventObj.tagName=="td"||eventObj.tagName=="TD") 172 { 173 xy=eventObj.getAttribute("name").split("d"); 174 temp_d=parseInt(xy[1]) 175 temp_m=parseInt(xy[0].split("m")[1]) 176 selectDate(temp_m,temp_m,temp_d,temp_d) 177 } 178 } 179 180 181 obj.onmouseup=function(event) 182 { 183 if(event == null){ 184 event = window.event; // For IE 185 } 186 var eventObj = event.srcElement? event.srcElement : event.target; // IE use srcElement, Firefox use target 187 if(eventObj.tagName=="td"||eventObj.tagName=="TD") 188 { 189 xy=eventObj.getAttribute("name").split("d"); 190 temp_d1=parseInt(xy[1]) 191 temp_m1=parseInt(xy[0].split("m")[1]) 192 sM=temp_m<temp_m1?temp_m:temp_m1; 193 sD=temp_d<temp_d1?temp_d:temp_d1; 194 eM=temp_m<temp_m1?temp_m1:temp_m; 195 eD=temp_d<temp_d1?temp_d1:temp_d; 196 selectDate(sM,eM,sD,eD) 197 selectDate(temp_m,temp_m,temp_d,temp_d) 198 } 199 } 200 /********************************************************/ 201 dayObj.onclick=function(event) 202 { 203 if(event == null){ 204 event = window.event; // For IE 205 } 206 var eventObj = event.srcElement? event.srcElement : event.target; // IE use srcElement, Firefox use target 207 if(eventObj.tagName=="TD") 208 { 209 210 selectDay(eventObj) 211 } 212 } 213 monthObj.onclick=function(event) 214 { 215 if(event == null){ 216 event = window.event; // For IE 217 } 218 var eventObj = event.srcElement? event.srcElement : event.target; // IE use srcElement, Firefox use target 219 if(eventObj.tagName=="TD") 220 { 221 selectMonth(eventObj) 222 } 223 } 224 } 225 </script> 226 <table width="100%" border="0" cellspacing="0" cellpadding="0"> 227 <tr align="center" valign="middle" bgcolor="#99CCFF"> 228 <td height="40" colspan="2"> 229 <INPUT class=button type=submit value=" < " name=Submit3> 230 2006 231 <INPUT class=button type=submit value=" > " name=Submit4> 232 </td> 233 </tr> 234 <tr bgcolor="#0099CC"> 235 <td height="25"> </td> 236 <td height="25" align="left" valign="top"> 237 <table width="100%" border="0" cellpadding="0" cellspacing="0" class="daysTitle" id="days"> 238 <tr align="center" valign="middle"> 239 <td width="20" height="25">M</td> 240 <td width="20" height="25">T</td> 241 <td width="20" height="25">W</td> 242 <td width="20" height="25">T</td> 243 <td width="20" height="25">F</td> 244 <td width="20" height="25" class="font_red" >S</td> 245 <td width="20" height="25" class="font_red" >S</td> 246 <td width="20" height="25">M</td> 247 <td width="20" height="25">T</td> 248 <td width="20" height="25">W</td> 249 <td width="20" height="25">T</td> 250 <td width="20" height="25">F</td> 251 <td width="20" height="25" class="font_red" >S</td> 252 <td width="20" height="25" class="font_red" >S</td> 253 <td width="20" height="25">M</td> 254 <td width="20" height="25">T</td> 255 <td width="20" height="25">W</td> 256 <td width="20" height="25">T</td> 257 <td width="20" height="25">F</td> 258 <td width="20" height="25" class="font_red" >S</td> 259 <td width="20" height="25" class="font_red" >S</td> 260 <td width="20" height="25">M</td> 261 <td width="20" height="25">T</td> 262 <td width="20" height="25">W</td> 263 <td width="20" height="25">T</td> 264 <td width="20" height="25">F</td> 265 <td width="20" height="25" class="font_red" >S</td> 266 <td width="20" height="25" class="font_red" >S</td> 267 <td width="20" height="25">M</td> 268 <td width="20" height="25">T</td> 269 <td width="20" height="25">W</td> 270 <td width="20" height="25">T</td> 271 <td width="20" height="25">F</td> 272 <td width="20" height="25" class="font_red" >S</td> 273 <td width="20" height="25" class="font_red" >S</td> 274 <td width="20" height="25">M</td> 275 <td width="20" height="25">T</td> 276 <td width="20" height="25">W</td> 277 <td width="20" height="25">T</td> 278 <td width="20" height="25">F</td> 279 <td width="20" height="25" class="font_red" >S</td> 280 <td width="20" height="25" class="font_red" >S</td> 281 </tr> 282 </table> 283 </td> 284 </tr> 285 <tr> 286 <td width="60" align="left" valign="top" bgcolor="#0099CC"> 287 <table width="100%" border="0" cellpadding="0" cellspacing="0" id="months" class="monthsTitle"> 288 <tr> 289 <td height="25" align="center" valign="middle">Jan</td> 290 </tr> 291 <tr> 292 <td height="25" align="center" valign="middle">Feb</td> 293 </tr> 294 <tr> 295 <td height="25" align="center" valign="middle">Mar</td> 296 </tr> 297 <tr> 298 <td height="25" align="center" valign="middle">Apr</td> 299 </tr> 300 <tr> 301 <td height="25" align="center" valign="middle">May</td> 302 </tr> 303 <tr> 304 <td height="25" align="center" valign="middle">Jun</td> 305 </tr> 306 <tr> 307 <td height="25" align="center" valign="middle">Jul</td> 308 </tr> 309 <tr> 310 <td height="25" align="center" valign="middle">Aug</td> 311 </tr> 312 <tr> 313 <td height="25" align="center" valign="middle">Sep</td> 314 </tr> 315 <tr> 316 <td height="25" align="center" valign="middle">Oct</td> 317 </tr> 318 <tr> 319 <td height="25" align="center" valign="middle">Nov</td> 320 </tr> 321 <tr> 322 <td height="25" align="center" valign="middle">Dec</td> 323 </tr> 324 </table> 325 </td> 326 <td align="left" valign="top"><div id="dataTable" style="width:100%;"></div> 327 </td> 328 </tr> 329 </table> 330 <table width="100%" height="40" border="0" cellpadding="0" cellspacing="0" bgcolor="#0099CC"> 331 <tr> 332 <td> </td> 333 <td> </td> 334 <td width="500"><input name="Submit" type="button" class="button" onClick="selectAll(true)" value="Select All"> 335 <input name="Submit" type="button" class="button" onClick="resetAll()" value="Reset All"> 336 <input name="Submit" type="button" class="button" onClick="selectAll(false)" value="Reverse Select"></td> 337 </tr> 338 </table> 339 <div id="report" style="width:100%;height:200px;overflow:auto; background-color:#CCCCCC;word-break:break-all; white-space:normal;line-height:18px;"></div> 340 </body> 341 </html>
