国产亚洲午夜高清国产亚洲,囯精品人妻无码一区二区三区99,91精品国产综合久久熟女

　COOL而實用的動態(tài)效果

作者：yu5911　時間： 2006-03-24　文檔類型：原創(chuàng)　來自：藍(lán)色理想

最近在做項目的時候，客戶要求表格里的數(shù)據(jù)可以拖選，于是用JS寫了個下面的方法。支持IE、FIREFOX等瀏覽器。實現(xiàn)對整行、整列數(shù)據(jù)的選取，全選、反選、清除，在數(shù)據(jù)表格內(nèi)拖拉出的矩形范圍的單元格數(shù)據(jù)全選。

PS:

1.如果數(shù)據(jù)單元格沒有數(shù)據(jù)，請將ID設(shè)為空或去掉ID，樣式為"inactive".則選擇時會跳過此單元格。

2.如果不想某個單元格被選，請將class設(shè)為“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原創(chuàng)，你可以免費使用，修改完善。但作為對作者和對你自己的尊重，務(wù)必保留此原始版權(quán)信息， 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<0)) return false; this.splice(index,1); return true; } Array.prototype.del=function(n) { //n表示第幾項，從0開始算起。 //prototype為對象原型，注意這里為對象增加自定義方法的方法。 if(n<0) //如果n<0，則不進(jìn)行任何操作。 return this; else return this.slice(0,n).concat(this.slice(n+1,this.length)); /* concat方法：返回一個新數(shù)組，這個新數(shù)組是由兩個或更多數(shù)組組合而成的。　　　　　　這里就是返回this.slice(0,n)/this.slice(n+1,this.length) 　　　　　　組成的新數(shù)組，這中間，剛好少了第n項。 slice方法：返回一個數(shù)組的一段，兩個參數(shù)，分別指定開始和結(jié)束的位置。 */ } 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+"個數(shù)據(jù)</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+"個數(shù)據(jù)</a>"+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<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" onClick="selectAll(true)" value="Select All"> <input name="Submit" type="button" class="button" onClick="resetAll()" value="Reset All"> <input name="Submit" type="button" class="button" onClick="selectAll(false)" 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 全部選擇提示：你可先修改部分代碼，再按運行]

經(jīng)典討論帖：
http://www.95time.cn/bbs/NewsDetail.asp?id=2508114

出處：藍(lán)色理想
責(zé)任編輯：moby

◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論

相關(guān)文章

js“樹”讀取xml數(shù)據(jù)


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計比賽網(wǎng)頁制作 web標(biāo)準(zhǔn) 用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點最新

站點最新列表

周大�！熬�•自然”設(shè)計大賽開啟

國際體驗設(shè)計大會7月將在京舉行

中國國防科技信息中心標(biāo)志征集

云計算如何讓安全問題可控

云計算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會

阿里行云

云手機(jī)年終巨獻(xiàn)，送禮標(biāo)配299起

阿里巴巴CTO王堅的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機(jī)主題設(shè)計大賽

欄目最新

欄目最新列表

淺談JavaScript編程語言的編碼規(guī)范

如何在illustrator中繪制臺歷

Ps簡單繪制一個可愛的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡單的作品展示頁面

CSS定位機(jī)制之一:普通流

25個最佳最閃亮的Eclipse開發(fā)項目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx