js仿Excel的求和计数平均值

最新推荐文章于 2022-12-26 13:42:31 发布
iteye_20192
最新推荐文章于 2022-12-26 13:42:31 发布
阅读量168
点赞数
文章标签： Excel C C++ C# J#
本文链接：https://blog.csdn.net/iteye_20192/article/details/81927954
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div id="divq">
<table width="50%" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse; line-height:25px" bordercolor="#ccccc" id="tab1">
  <tr>
    <td>1</td>
    <td>6</td>
    <td>7</td>
    <td>53</td>
    <td>erer</td>
    <td>43</td>
  </tr>
  <tr>
    <td>2</td>
    <td>6</td>
    <td>3453</td>
    <td>er</td>
    <td>e33</td>
    <td>434</td>
  </tr>
  <tr>
    <td>3</td>
    <td>5</td>
    <td>534</td>
    <td>534533</td>
    <td>dfsdf</td>
    <td>234</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>543</td>
    <td>we</td>
    <td>er</td>
    <td>334</td>
  </tr>
</table>
<span id="sum"></span>
</div>

<script type="text/javascript">
var selectedColor='#D6E0F5';
var currentColor='#FBEDBB';
//var data=null;
var table=document.getElementById("tab1");//表格
var selectArea={startX:-1,startY:-1,endX:-1,endY:-1};//选择面积
var srcArea={left:-1,top:-1,right:-1,bottom:-1,srcValue:null};//选择的源面积
var currentCell={x:-1,y:-1,cell:null};//当前格

//var ref=this;
var draging=false;

//this.AfterSelect=null;
//得到当前位置
function getTarget(evt){
	var target=null;
	target=evt.srcElement;
	if(target==null) target=evt.target;
	return target;
}
//是否选择
function hasSelected(){
	return selectArea.startX!=-1 && selectArea.startY!=-1 && selectArea.endX!=-1 && selectArea.endY!=-1;
}
//编辑否?
function inSelectedArea(x,y){
	if(hasSelected()){
		var sc=Math.min(selectArea.startX,selectArea.endX);
		var ec=Math.max(selectArea.startX,selectArea.endX);
		var sr=Math.min(selectArea.startY,selectArea.endY);
		var er=Math.max(selectArea.startY,selectArea.endY);
		return (x>=sc && x<=ec && y>=sr && y<=er);
	}else{
		return false;
	}
}
//高亮
function highLight(sx,sy,ex,ey,color){
	var sc=Math.min(sx,ex);
	var ec=Math.max(sx,ex);
	var sr=Math.min(sy,ey);
	var er=Math.max(sy,ey);

	for(var i=sc;i<=ec;i++){
		for(var j=sr;j<=er;j++){
			if(j!=currentCell.y || i!=currentCell.x){
				var cell=table.rows[j].cells[i];
				cell.style.backgroundColor=color;
			}
		}
	}
}
//清除选择
function clearSelect(){
	if(hasSelected()){
		highLight(selectArea.startX,selectArea.startY,selectArea.endX,selectArea.endY,'');
	}
	selectArea.startX=-1;
	selectArea.startY=-1;
	selectArea.endX=-1;
	selectArea.endY=-1;
}

if(document.attachEvent){
	document.attachEvent("onmouseup",body_onmouseup);
	/*document.attachEvent("onmousedown",function(evt){
			//if(evt==null) evt=event;
			return false;//body_mousedown(evt);
		});*/
}else if(document.addEventListener){
	document.addEventListener("mouseup",body_onmouseup,false);
	/*document.addEventListener("mousedown",function(evt){
			//if(evt==null) evt=event;
			return false;//body_mousedown(evt);
		},false);*/
}

function body_onmouseup(evt){
	draging=false;
	//var target=getTarget(evt);
}

function setCurrentCell(c,r){
	if(currentCell.cell!=null && (c!=currentCell.x || r!=currentCell.y)){
		currentCell.cell.style.backgroundColor=(inSelectedArea(currentCell.x,currentCell.y)?selectedColor:'');
	}
	currentCell.x=c;
	currentCell.y=r;
	currentCell.cell=table.rows[r].cells[c];
	currentCell.cell.style.backgroundColor=currentColor;
}

function getButton(evt){
	if((evt.which!=undefined && evt.which==1) || evt.button==1)
		return 1;
	else if((evt.which!=undefined && evt.which==3) || evt.button==2)
		return 2;
}

function copy(){
	if(hasSelected()){
		srcArea.left=Math.min(selectArea.startX,selectArea.endX);
		srcArea.right=Math.max(selectArea.startX,selectArea.endX);
		srcArea.top=Math.min(selectArea.startY,selectArea.endY);
		srcArea.bottom=Math.max(selectArea.startY,selectArea.endY);
	}else{
		srcArea.left=currentCell.x;
		srcArea.right=currentCell.x;
		srcArea.top=currentCell.y;
		srcArea.bottom=currentCell.y;
	}
	srcArea.srcValue=new Array();
	for(var y=srcArea.top;y<=srcArea.bottom;y++){
		var r=new Array();
		srcArea.srcValue.push(r);
		for(var x=srcArea.left;x<=srcArea.right;x++){
			r.push(get(y,x));
		}
	}
	srcArea.srcValue=srcArea.srcValue.toString().split(",");
	eval("var sum=Number('"+srcArea.srcValue.join("')+Number('")+"')");
	document.getElementById("sum").innerHTML="求和:"+ (isNaN(sum)?"0":sum) + " 计数:"+ srcArea.srcValue.length + " 平均值:" + (isNaN(sum)?"0":sum/srcArea.srcValue.length);
}

function get(x,y){
	//alert(x+" " + y);
	var cell=table.rows[x].cells[y];
	//if(cell==undefined)return;
	/*if(cell.childNodes.length>0 && cell.firstChild.nodeName.toUpperCase()=='INPUT'){
		return cell.firstChild.value;
	}else{*/
		return (cell.innerText==undefined?cell.textContent:cell.innerText);
	//}
}

function getSelectedArea(){
	var area={
		startX:selectArea.startX,
		startY:selectArea.startY,
		endX:selectArea.endX,
		endY:selectArea.endY
	}
	return hasSelected()?area:null;
}

function onmousedown(evt){
	var target=getTarget(evt);//得到当前执行的元素
	if(target.nodeName.toUpperCase()=='TD'){//是Td的话
		var btn=getButton(evt);//左右键?
		var c=target.cellIndex//列
		var r=target.parentNode.rowIndex//行
		if(btn==1){//左键;
			setCurrentCell(c,r);//设置颜色
			clearSelect()//清除;
			selectArea.startX=c;//开始于X轴
			selectArea.startY=r//Y轴
			selectArea.endX=-1//结束位置
			selectArea.endY=-1//结束Y
			draging=true;//有选择区域;
		}else if(btn==2){//右键
			if(!inSelectedArea(c,r)) setCurrentCell(c,r);//
		}
	}
	return false;
}

function onmousemove(evt){
	if(draging){
		var target=getTarget(evt)
		if(target.nodeName.toUpperCase()=='TD' && selectArea.startX!=-1 && selectArea.startY!=-1){
			var c=target.cellIndex;
			var r=target.parentNode.rowIndex;
			if(selectArea.endY==-1 && selectArea.endX==-1){
				//第一次触发，高亮选择区域
				highLight(selectArea.startX,selectArea.startY,c,r,selectedColor);
			}else if(selectArea.endX!=c || selectArea.endY!=r){
				//选择区域改变，高亮新的选择区域
				highLight(selectArea.startX,selectArea.startY,selectArea.endX,selectArea.endY,'');
				highLight(selectArea.startX,selectArea.startY,c,r,selectedColor);
			}
			selectArea.endX=c;
			selectArea.endY=r;
		}
	}
}

function onmouseup(evt){
	if((evt.which!=undefined && evt.which==1) || evt.button==1){//左键
		if(draging){
			/*try{
				var target=getTarget(evt)//得到位置
				if(target.nodeName.toUpperCase()=='TD'){
					var c=target.cellIndex;
					var r=target.parentNode.rowIndex;
					//判断是否启动了拖动
					if(hasSelected()){
						try{
							AfterSelect(this,evt);
						}catch(msg){
							alert(msg);
						}
						//alert(container.firstChild.focus());
					}
				}
			}
			finally{*/
				draging=false;
				//alert(srcArea.srcValue);
			//}
		copy();
		}
	}else if((evt.which!=undefined && evt.which==3) || evt.button==2){//右键
		var target=getTarget(evt)
		if(target.nodeName.toUpperCase()=='TD'){
			var x=target.cellIndex;
			var y=target.parentNode.rowIndex;
			var left=Math.min(selectArea.startX,selectArea.endX);
			var right=Math.max(selectArea.startX,selectArea.endX);
			var top=Math.min(selectArea.startY,selectArea.endY);
			var bottom=Math.max(selectArea.startY,selectArea.endY);
			if(!(x>=left && x<=right && y>=top && y<=bottom)){
				clearSelect();
			}
		}
	}
	return true;
}

function onselectstart(evt){return false;}

var div=document.getElementById("divq");//.firstChild
div.tabIndex = -1
div.style.outline = "none"
div.onselectstart=function(evt){
	if(evt==null) evt=event;
	return onselectstart(evt);
}
div.onmouseover=function(evt){
	if(evt==null) evt=event;
	return onmousemove(evt);
}
div.onmousedown=function(evt){
	if(evt==null) evt=event;
	return onmousedown(evt);
}
div.onmouseup=function(evt){
	if(evt==null) evt=event;
	return onmouseup(evt);
}
</script>
</body>
</html>