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.
Run Code Box
<! 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><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><script language= "javascript" type= "Text/javascript" src= "Array.js" ></script></pead ><body><script type= "Text/javascript" language= "JavaScript" >/************************************ This code is original for flyingfish, you can use it for free, modify and perfect. But as a respect to the author and to yourself, be sure to retain this original copyright information, designed By:flyingfishweb site:www.yu5911.cnemail:penglongxiang@gmail.comqq:55856710* /array.prototype.remove = function (index) {if ( isNaN (index) | | (index>=this.length) | | (index<0)) return false; This.splice (index,1); return true;} 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. */}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;} 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;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= "";//document.write (' <table id= "Ca" onselectstart= "return false" border= "0" cellpadding= "0" cellspacing= "0" > "for (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 =datedata + ' </tr> '}datedata = ' <table id= ' ca ' onselectstart= ' return false ' border= ' 0 ' cellpadding= "0" cellspacing= "0" width= "100%" height= "100%" > ' +datedata+ "</table>"//document.write (' </ Table> ') 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.classname!= "Bg_green") {if (Selectedid.indexof) (" M "+m+" D "+d)!=-1) {did =selectedid.indexof (" M "+m+" D "+d) Selectedid.remove (did) tid.classname=" inactive "}else{ Selectedid.put ("M" +m+ "D" +d) tid.classname= "bg_red"}}}}}document.getelementbyid ("the"). Innerhtml= "<a style= ' color:red ' > selected ' +selectedid.length+ ' data </a> ' +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 ();d Ocument.getelementbyid ("the"). Innerhtml= "<a style= ' color:red ' > selected" + selectedid.length+ "Data </a>" +selectedid}} function Selectmonth (month) {month = Month.parentnode.rowindex+1selectdate (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 daysmonths = MonthObj.rows.length//Get Monthsvar Obj=document.getelementbyid ("dataTable"); var eventobj;// Creatdatedatadocument.getelementbyid ("DataTable"). Innerhtml=datedata//document.body.innerText=document.body.innerhtmlobj.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 ( 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") {selectmonth (EVENTOBJ)}}}</script><ta ble width= "100%" border= "0" cellspacing= "0" cellpadding= "0" > <tr align= "center" valign= "Middle" bgcolor= "#99CCFF "> <td height=" colspan= "2" ><input Class=button type=submit value= "<" Name=submit3>2006<input Class=button type=submit value= ">" name=submit4> </td> </tr> <tr bgcolor= "#0099CC" > <td height= "> </td> <td height=" "align=" left "valign=" Top "><tabLe width= "100%" border= "0" cellpadding= "0" cellspacing= "0" class= "daystitle" id= "Days" ><tr align= "center" valign = "middle" > <td width= "a" height= ">M</td> <td width=" "height=" "" >T</td> <td width = "height=" ">W</td> <td width=" height= ">T</td> <td width=" "height=" </td> <td width= "height=" class= "font_red" >S</td> <td width= "height=" "class=" Font_r Ed ">S</td> <td width=" height= ">M</td> <td width=" "height=" ">T</td> <t D width= "height=" ">W</td> <td width=" height= ">T</td> <td width=" "height=" "25" & Gt f</td> <td width= "height=" class= "font_red" >S</td> <td "width=" height= "class=" Red ">S</td> <td width=" height= ">M</td> <td width=" "height=" ">T</td> < TD width= "Height=" >w</td&Gt <TD width= "height=" >T</td> <td width= "a" height= ">F</td> <td width=" "height=" "Class=" font_red ">S</td> <td width=" height= "" class= "font_red" >S</td> <td width= "20" height= ">M</td> <td width=" "height=" >T</td> <td-width= "" height= " Gt <TD width= "height=" >T</td> <td width= "a" height= ">F</td> <td width=" "height=" "Class=" font_red ">S</td> <td width=" height= "" class= "font_red" >S</td> <td width= "20" height= ">M</td> <td width=" "height=" >T</td> <td-width= "" height= " Gt <TD width= "height=" >T</td> <td width= "a" height= ">F</td> <td width=" "height=" "Class=" font_red ">S</td> <td width=" height= "" class= "font_red" >S</td> <td width= "20" height= ">M</TD"> <td width= "height=" >T</td> <td width= "height=" ">W</td> <td width=" Heig ht= ">T</td> <td width=" height= ">F</td> <td width=" "height=", "class=" and "font_red" Gt s</td> <td width= "height=" class= "font_red" >S</td> </tr> </table></td> &L t;/tr> <tr> <td width= "align=" "left" valign= "Top" bgcolor= "#0099CC" ><table width= "100%" border= " 0 "cellpadding=" 0 "cellspacing=" 0 "id=" months "class=" Monthstitle "> <tr> <td height=" + "align=" center "VA Lign= "Middle" >Jan</td> </tr> <tr> <td height= "align=" "Center" valign= "Middle" >feb</ td> </tr> <tr> <td height= "a" align= "center" valign= "Middle" >Mar</td> </tr> <t r> <td height= "align=" center "valign=" Middle ">Apr</td> </tr> <tr> <td height=" 25 "align=" Center "valign="Middle" >May</td> </tr> <tr> <td height= "align=" "Center" valign= "Middle" >jun</td> ; </tr> <tr> <td height= "align=" "Center" valign= "Middle" >Jul</td> </tr> <tr> <TD height= "align=" center "valign=" Middle ">Aug</td> </tr> <tr> <td height=" align= " "Center" valign= "Middle" >Sep</td> </tr> <tr> <td height= "align=" "Center" valign= "Middle" &G t;oct</td> </tr> <tr> <td height= "a" align= "center" valign= "Middle" >Nov</td> </tr& Gt <tr> <td height= "align=" center "valign=" Middle ">Dec</td> </tr></table></td> <TD align= "left" valign= "top" ><div id= "dataTable" style= "width:100%;" ></div></td> </tr></table><table width= "100%" height= "border=" "0" cellpadding= "0" cellspacing= "0" bgcolor= "#0099CC" > <tr> <td> </td> <td> </td> <td width= "$" ><input name= "Submit" type= "button" class= "button" value= "Select All" > <input name= "Submit" type= "button" class= "button" value= "Reset All" > <input name= "Sub MIT "type=" button "class=" button "value=" Reverse Select "></td> </tr></table><div id=" " Style= "Width:100%;height:200px;overflow:auto; Background-color: #CCCCCC; word-break:break-all; white-space:normal;line-height:18px; " ></div></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
