COOL而實用的動態效果

來源:互聯網
上載者:User
動態

最近在做項目的時候,客戶要求表格裡的資料可以拖選,於是用JS寫了個下面的方法。支援IE、FIREFOX等瀏覽器。實現對整行、整列資料的選取,全選、反選、清除,在資料表格內拖拉出的矩形範圍的儲存格資料全選。

PS:

1.如果資料儲存格沒有資料,請將ID設為空白或去掉ID,樣式為"inactive".則選擇時會跳過此儲存格。

2.如果不想某個儲存格被選,請將class設為“bg_green”,則選擇時會跳過此儲存格。

運行代碼框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><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></head><body><script type="text/javascript" language="javascript">/****************************************************************** 此代碼為FLYINGFISH原創,你可以免費使用,修改完善。但作為對作者和對你自己的尊重,務必保留此原始著作權資訊,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表示第幾項,從0開始算起。//prototype為對象原型,注意這裡為對象增加自訂方法的方法。 if(n<0) //如果n<0,則不進行任何操作。 return this; else return this.slice(0,n).concat(this.slice(n+1,this.length)); /* concat方法:返回一個新數組,這個新數組是由兩個或更多數組組合而成的。       這裡就是返回this.slice(0,n)/this.slice(n+1,this.length)       組成的新數組,這中間,剛好少了第n項。 slice方法: 返回一個數組的一段,兩個參數,分別指定開始和結束的位置。 */}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="20" height="25" 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("report").innerHTML="<a style='color:red' >共選中"+selectedID.length+"個資料</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();document.getElementById("report").innerHTML="<a style='color:red' >共選中"+selectedID.length+"個資料</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><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr align="center" valign="middle" bgcolor="#99CCFF"> <td height="40" 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="25"> </td> <td height="25" align="left" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="daysTitle" id="days"><tr align="center" valign="middle"> <td width="20" height="25">M</td> <td width="20" height="25">T</td> <td width="20" height="25">W</td> <td width="20" height="25">T</td> <td width="20" height="25">F</td> <td width="20" height="25" class="font_red" >S</td> <td width="20" height="25" class="font_red" >S</td> <td width="20" height="25">M</td> <td width="20" height="25">T</td> <td width="20" height="25">W</td> <td width="20" height="25">T</td> <td width="20" height="25">F</td> <td width="20" height="25" class="font_red" >S</td> <td width="20" height="25" class="font_red" >S</td> <td width="20" height="25">M</td> <td width="20" height="25">T</td> <td width="20" height="25">W</td> <td width="20" height="25">T</td> <td width="20" height="25">F</td> <td width="20" height="25" class="font_red" >S</td> <td width="20" height="25" class="font_red" >S</td> <td width="20" height="25">M</td> <td width="20" height="25">T</td> <td width="20" height="25">W</td> <td width="20" height="25">T</td> <td width="20" height="25">F</td> <td width="20" height="25" class="font_red" >S</td> <td width="20" height="25" class="font_red" >S</td> <td width="20" height="25">M</td> <td width="20" height="25">T</td> <td width="20" height="25">W</td> <td width="20" height="25">T</td> <td width="20" height="25">F</td> <td width="20" height="25" class="font_red" >S</td> <td width="20" height="25" class="font_red" >S</td> <td width="20" height="25">M</td> <td width="20" height="25">T</td> <td width="20" height="25">W</td> <td width="20" height="25">T</td> <td width="20" height="25">F</td> <td width="20" height="25" class="font_red" >S</td> <td width="20" height="25" class="font_red" >S</td> </tr> </table></td> </tr> <tr> <td width="60" align="left" valign="top" bgcolor="#0099CC"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="months" class="monthsTitle"> <tr> <td height="25" align="center" valign="middle">Jan</td> </tr> <tr> <td height="25" align="center" valign="middle">Feb</td> </tr> <tr> <td height="25" align="center" valign="middle">Mar</td> </tr> <tr> <td height="25" align="center" valign="middle">Apr</td> </tr> <tr> <td height="25" align="center" valign="middle">May</td> </tr> <tr> <td height="25" align="center" valign="middle">Jun</td> </tr> <tr> <td height="25" align="center" valign="middle">Jul</td> </tr> <tr> <td height="25" align="center" valign="middle">Aug</td> </tr> <tr> <td height="25" align="center" valign="middle">Sep</td> </tr> <tr> <td height="25" align="center" valign="middle">Oct</td> </tr> <tr> <td height="25" align="center" valign="middle">Nov</td> </tr> <tr> <td height="25" 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="40" border="0" cellpadding="0" cellspacing="0" bgcolor="#0099CC"> <tr> <td> </td> <td> </td> <td width="500"><input name="Submit" type="button" class="button" value="Select All"> <input name="Submit" type="button" class="button" value="Reset All"> <input name="Submit" type="button" class="button" value="Reverse Select"></td> </tr></table><div id="report" style="width:100%;height:200px;overflow:auto; background-color:#CCCCCC;word-break:break-all; white-space:normal;line-height:18px;"></div></body></html>

    [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。