Recently in the project, the customer requested the data in the form can be dragged and selected, so with JS write a method below. Support IE, Firefox and other browsers. To achieve the whole row, the whole column of data selection, select, reverse, clear, in the data table dragged out of the rectangular range of cell data selection.
Ps:
1. If the data cell does not have data, set the ID to empty or remove the ID, the style is "inactive". This cell is skipped when you select.
2. If you do not want a cell to be selected, set the class to "Bg_green", and the cell is skipped when you select it.
<p><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" > <ptml> <pead> <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "> <title>calendar</title></P> <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; }</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;} </style> <script language= "JavaScript type=" text/ JavaScript "src=" Array.js "></script> </pead></P> <P><body> <script type=" text/ JavaScript "language=" JavaScript ></P> <p>/****************************************************** This code is original for flyingfish, you can use it for free, modify and perfect. But as for the author and for your own respect, be sure to retain this original copyright information, designed by:flyingfish WEB SITE:www.yu5911.cn email:penglongxiang@gmail.com qq:55856710& Lt;/p> <P>******************************************************************/</P> <P> Array.prototype.remove = function (index) {if isNaN (index) | | (index>=this.length) | | (index<0)) return false; This.splice (index,1); return true; }</p> <p>array.prototype.del=function (n) {//n represents the first few items, starting from 0. Prototype is an object prototype, note the method for adding a custom method to an object. if (n<0)//If n<0, no action is made. return this; else return This.slice (0,n).Concat (This.slice (n+1,this.length)); /* Concat method: Returns a new array, which is a combination of two or more arrays. This is the new array that returns the This.slice (0,n)/this.slice (N+1,this.length), which, in the middle, is just missing the nth item. Slice method: Returns a section of an array, two parameters, specifying the start and end positions respectively. */}</p> <P> Array.prototype.indexOf = function (value) {for (Var i=0;i<this.length;i++) {if (typeof) (value . equals) = = "function") {if (Value.equals (This[i])) return i; }else if (value==this[i]) return i; } return-1; }</p> <p>array.prototype.contains = function (value) {return This.indexof (value) >=0;} </P> <p>array.prototype.clear = function () {while (this.length>0) this.remove (this.length-1);} </P> <p>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; }}</p> <p>array.prototype.put = function (value) {if (!this.contains) (ValUE)) This.push (value); }</p> <p>array.prototype.circle = function (degressive) {if (degressive) {var a = this[0]; for (Var i=0;i<this.length-1;i++) this[i] = this[i+1]; This[this.length-1] = A; }else{var a = this[this.length-1]; for (Var i=this.length-1;i>0;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= "";</P> <p>//document.write (' <table id= Ca ' onselectstart= "return false" border= "0" cellpadding= "0" cellspacing= "0" > ' (t=1;t<13;t++) {datedata =datedata + ' <tr> ' for (i=1;i<=42;i++) {datedata =datedata + ' <TD Width= "height=" id= "M ' +t+ ' d ' +i+ '" name= "M ' +t+ ' d ' +i+ '" class= "inactive" > ' +i+ ' </td> '} datedata =dated ATA + ' </tr> '} datedata = ' <table id= Ca ' onselectstart= ' return false ' border= ' 0 ' cellpadding= ' 0 ' cellspacing= ' 0 "width=" 100% "height=" 100% "> ' +datedata+" </table> "//documeNt.write (' </table> ') </P> <p>function selectdate (startm,endm,startd,endd) {for (M = startm;m<= endm;m++) {for (d = startd;d<=endd;d++) {Tid=document.getelementbyid ("M" +m+ "D" +d) if (tid!=null) {if (Tid.clas sname!= "Bg_green") {if (Selectedid.indexof ("M" +m+ "D" +d)!=-1) {did =selectedid.indexof ("M" +m+ "D" +d) selecte Did.remove (DID) tid.classname= "inactive"}else{selectedid.put ("M" +m+ "D" +d) tid.classname= "bg_red" }}}} document.getElementById ("a") innerhtml= "a total of selected" +selectedid.length+ "Data" +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;k++) {Did=document.getelementbyid (selectedid[k-1]) did.classname= "inactive"; } selectedid.clear (); document.getElementById ("the") innerhtml= "select" +selectedid.length+ "Data" +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)}</p> <p>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<temp_m1?temp_m:temp_m1; sd=temp_d<temp_d1?temp_d:temp_d1; em=temp_m<temp_m1?temp_m1:temp_m; ed=temp_d<temp_d1?temp_d1:temp_d; Selectdate (sm,em,sd,ed) selectdate (temp_m,temp_m,temp_d,temp_d)}/******************************************* /Dayobj.onclick=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") {Selectday (EVENTOBJ) } monthobj.onclick=function {if (event = = null) {event = window.event;//For IE} var eventObj = Ev Ent.srcelement? Event.srcElement:event.target; IE use srcelement, Firefox use target if (eventobj.tagname== "TD") {Selectmonth (EVENTOBJ)}}}</p> ; <P></script> <table width= "100%" border= "0" cellspacing= "0" cellpadding= "0" > <tr align= "center" V Align= "Middle" bgcolor= "#99CCFF" > <td height= "," colspan= "2" > <input class=button type=submit value= "& Lt "Name=submit3> 2006 <input Class=button type=submit value=" > "name=submit4> </td></P> ; p> </tr> <tr bgcolor= "#0099CC" > <td height= "" > </td> <td height= "align=" lef T "valign=" > <table width= "100%" border= "0" cellpadding= "0" cellspacing= "0" class= "daystitle" id= "Days" >& lt;/p> <P> <tr align= "center" valign= "Middle" > <td width= "Heig"ht= ">M</td> <td width=" "height=" >T</td> <td-width= "" height= " gt;</p> <P> <td width= "The height=" >T</td> <td width= "" height= " T <TD width= "height=" class= "font_red" >S</td> <td "width=" height= "class=" font_red lt;/td></p> <P> <td width= "The height=" >M</td> <td width= "" height= " t;/td> <td width= "height=" >W</td> <td width= "height=" >T</td></P> <P> <td width= "height=" >F</td> <td width= "height=" class= "font_red" >s</ td> <td width= "height=" class= "font_red" >S</td> <td "width=" height= ">m</td" ></P> <P> <td width= "height=" >T</td> <td width= "a" height= ">w</td&" Gt <tdWidth= "height=" >T</td> <td width= "height=" >F</td></P> <P> <td W Idth= "height=" class= "font_red" >S</td> <td "width=" height= "class=" font_red T <TD width= "height=" >M</td> <td width= "height=" >T</td></P> <P> & LT;TD width= "height=" >W</td> <td width= "a" height= ">T</td> <td-width=" Hei ght= ">F</td> <td width=" "height=" class= "font_red" >S</td></P> <P> < TD width= "height=" class= "font_red" >S</td> <td width= "height=" >M</td> <td Width= "height=" >T</td> <td width= "height=" >W</td></P> <P> <td Width= "height=" >T</td> <td width= "height=" ">F</td> <td width=" height= "2 5 "class=" Font_rEd ">S</td> <td width=" "height=" class= "font_red" >S</td></P> <P> <td W Idth= "height=" >M</td> <td width= "height=" ">T</td> <td width=" height= "25 ">W</td> <td width=" height= ">T</td></P> <P> <td width=" "height=" 25 " >F</td> <td width= "height=" "class=" font_red ">S</td> <td width=" "height=" C " lass= "font_red" >S</td> </tr></P> <P> </table> </td> </tr> <tr > <td width= "align=" "left" valign= "Top" bgcolor= "#0099CC" > <table width= "100%" border= "0" cellpadding = "0" cellspacing= "0" id= "months" class= "Monthstitle" ></P> <P> <tr> <td height= "align=" cen ter "valign=" Middle ">Jan</td> </tr> <tr> <td height=" "align=" center "valign=" Middle " ; Feb</td></p> <P> </tr> <tr> <td height= "+" align= "center" valign= "Middle" >Mar</td> </tr> <tr></P> <P> <td height= "align=" "Center" valign= "Middle" >Apr</td> </tr> &L t;tr> <td height= align= "center" valign= "Middle" >May</td> </tr></P> <P> <tr > <td height= "align=" "Center" valign= "Middle" >Jun</td> </tr> <tr> <td height= "Align=" "Center" valign= "Middle" >Jul</td></P> <P> </tr> <tr> <td height= "25" align= "center" valign= "Middle" >Aug</td> </tr> <tr></P> <P> <td height= "Ali" gn= "center" valign= "Middle" >Sep</td> </tr> <tr> <td height= "align=" center "valign=" mid Dle ">Oct</td> </tr></P> <P> <tr> <td height=" align= "center" valign= "Middle" >Nov</td> </tr> <tr> <td height= "a" align= "center" valign= "Middle" >Dec</td></P> <P> </ tr> </table></P> <P> </td> <td align= "left" valign= "top" ><div id= "dataTable" >& lt;/div> </td></P> <P> </tr> </table> <table width= "100%" height= "border=" "0" ce llpadding= "0" cellspacing= "0" bgcolor= "#0099CC" > <tr> <td> </td> <td> </td>< /p> <P> <td width= "a" ><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" &G T <input name= "Submit" type= "button" class= "button" onclick= "SelectAll (false)" value= "Reverse Select" ></td > </tr> </table></P> <P> <div id= "</ptml>&" ></div> </body> Lt;/p>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
