当前页面: 开发资料首页 → Javascript 专题 → COOL而实用的动态效果
COOL而实用的动态效果
摘要: COOL而实用的动态效果
<tr>
<td>
最近在做项目的时候，客户要求表格里的数据可以拖选，于是用JS写了个下面的方法。支持IE、FIREFOX等浏览器。实现对整行、整列数据的选取，全选、反选、清除，在数据表格内拖拉出的矩形范围的单元格数据全选。
PS:
1.如果数据单元格没有数据，请将ID设为空或去掉ID，样式为"inactive".则选择时会跳过此单元格。
2.如果不想某个单元格被选，请将class设为“bg_green”,则选择时会跳过此单元格。
运行代码框
<textarea class=fm cols=78 id=code rows=12> HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
calendar
<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: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，则不进行任何操作。
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="共选中"+selectedID.length+"个数据"+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="共选中"+selectedID.length+"个数据"+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
</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">
</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>
</body>
</textarea>
<input onclick="runEx('code')" onfocus=this.blur() style="CURSOR: hand" type=button value=运行代码> <input name=Submit onclick=cycode(code) onfocus=this.blur() style="CURSOR: hand; WIDTH: 95px" type=button value=复制到剪贴板> <input onclick=svcode(code) onfocus=this.blur() style="CURSOR: hand" type=button value=另存代码> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
</td>
</tr>
</table>
↑返回目录
前一篇: 模仿combox(select)控件
后一篇: xWin之JS版
