COOL而實用的動態效果

2019-11-21 02:33:56

字體：大中小

來源：轉載

供稿：網友

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

PS:

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

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

<P><!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></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></head></P><P><body><script type="text/javascript" language="javascript"></P><P>/****************************************************************** 此代碼為FLYINGFISH原創，你可以免費使用，修改完善。但作為對作者和對你自己的尊重，務必保留此原始版權信息，DESIGNED BY： flyingfishWEB SITE: www.yu5911.cnEMAIL:penglongxiang@gmail.comQQ: 55856710</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表示第幾項，從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方法： 返回一個數組的一段，兩個參數，分別指定開始和結束的位置。    */}</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">')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>')</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.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+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(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)  } }}</P><P></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></P><P>  </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"></P><P>   <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></P><P>     <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></P><P>     <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></P><P>     <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></P><P>     <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></P><P>     <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></P><P>     <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></P><P>     <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></P><P>     <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></P><P>     <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></P><P>     <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></P><P>   </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"></P><P>  <tr>    <td height="25" align="center" valign="middle">Jan</td>  </tr>  <tr>    <td height="25" align="center" valign="middle">Feb</td></P><P>  </tr>  <tr>    <td height="25" align="center" valign="middle">Mar</td>  </tr>  <tr></P><P>    <td height="25" align="center" valign="middle">Apr</td>  </tr>  <tr>    <td height="25" align="center" valign="middle">May</td>  </tr></P><P>  <tr>    <td height="25" align="center" valign="middle">Jun</td>  </tr>  <tr>    <td height="25" 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="25" align="center" valign="middle">Sep</td>  </tr>  <tr>    <td height="25" align="center" valign="middle">Oct</td>  </tr></P><P>  <tr>    <td height="25" align="center" valign="middle">Nov</td>  </tr>  <tr>    <td height="25" align="center" valign="middle">Dec</td></P><P>  </tr></table></P><P> </td>    <td align="left" valign="top"><div   class="iwvjtn8m0"   id="dataTable" style="width:100%;"></div> </td></P><P>  </tr></table><table width="100%" height="40"  border="0" cellpadding="0" cellspacing="0" bgcolor="#0099CC">  <tr>    <td> </td>    <td> </td></P><P>    <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></P><P><div   class="iwvjtn8m0"   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></P>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：不錯顯示時間特效

下一篇：非常酷的有農歷的日歷掛歷!