表格里的数据可以拖选

最近在做项目的时候,客户要求表格里的数据可以拖选,于是用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: flyingfish
WEB SITE: www.yu5911.cn
EMAIL:[email protected]
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,则不进行任何操作。
    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+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>

你可能感兴趣的:(表格)