网页上框选复选框

最新推荐文章于 2024-03-26 16:25:43 发布

xieronghua246

最新推荐文章于 2024-03-26 16:25:43 发布

阅读量225

点赞数

分类专栏：页面技术文章标签： C C++ C# J# F#

页面技术专栏收录该内容

55 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title>列表区域选择Demo</title>
<style>
body {font-size:12px; margin:0px;}
table {border-left:1px solid #999999;border-top:1px solid #999999;}
td {border-right:1px solid #999999;border-bottom:1px solid #999999;font-size:12px;}
.selectTable {border-left:1px solid #99bbdd;border-top:1px solid #99bbdd;}
.selectTable td {	border-right:1px solid #99bbdd;border-bottom:1px solid #99bbdd;}
.selected {background-color: #cccccc;}
.selected1 {background-color: #cc00cc;}
</style>

<script language="JavaScript">
var ECGridSelector=function()
{
var 
A=this;
A.selectTable=null;
A.selectRows=null;
var H=false,G=false,K=null,
C={x:-1,y:-1},
E={x:-1,y:-1},
I={x:-1,y:-1},

D=function(B,A){return B<A?B:A},
F=function(B,A){return B>A?B:A},
B=function(J)
{
var I=J==""?"off":"on",
L=D(C.x,E.x),
B=F(C.x,E.x),
M=D(C.y,E.y),
G=F(C.y,E.y),
H=null;
for(var N=M;N<=G;N++)
{
	for(var K=L;K<=B;K++)
	{
		H=A.selectRows[N].cells[K];
		H.className=J;
		H.setAttribute("unselectable",I)
	}
}
}
,J=false;

A.doSelect=function(A)
{
if(!G||J)return;
J=true;
A=A||window.event;
var C=A.target||A.srcElement,
D=E.x,
F=E.y;
I.x=C.cellIndex;
I.y=C.parentNode.rowIndex;
B("");
E.x=I.x;
E.y=I.y;
B("selected");
J=false
};
A.startSelect=function(A){
A=A||window.event;

if(!H||J||!(A.which==1||A.button==1))
return;
G=true;
var D=A.target||A.srcElement;
C.x=D.cellIndex;
C.y=D.parentNode.rowIndex;
E.x=D.cellIndex;
E.y=D.parentNode.rowIndex;
B("selected")
};
A.endSelect=function(A){G=false;B("selected")};

A.toggleSelectable=function(){if(H){H=false;A.selectTable.className="";if(C.x>=0)B("")}
else{H=true;A.selectTable.className="selectTable"}C.x=-1;C.y=-1;E.x=-1;E.y=-1};

A.getJSONData=function()
{
var J=[];
if(C.x<0)return J;
var B=null,
L=D(C.x,E.x),G=F(C.x,E.x),
M=D(C.y,E.y),H=F(C.y,E.y),
I=null;
for(var N=M;N<=H;N++)
{
	B=[];
	for(var K=L;K<=G;K++)
    {
	   I=A.selectRows[N].cells[K];
	   B.push(I)
	}
	J.push(B)
}
 return J
}
}

var mySelector=new ECGridSelector();

function init(){
	mySelector.selectTable=document.getElementById("testTable");
	mySelector.selectRows=mySelector.selectTable.rows;
	mySelector.toggleSelectable();
}

function resetBackGround()
{     
	var checklist=document.getElementsByName("checkbox");
	for (var i=0;i<checklist.length;i++)
	{
	    var obj=checklist[i];
		if((obj.parentNode.className=="selected")&&(obj.checked))
		{		
		  continue;
		}
		if((obj.parentNode.className=="")&&(!obj.checked))
		{
		  continue;
		}		
		if(obj.checked)
		{
		   obj.parentNode.className="selected";
		}
		else
		{
		   obj.parentNode.className="";
		}
	}
}

function checkOnclick(event)
{    

	if(event.srcElement.checked)
	{ 
	    event.srcElement.parentNode.className="selected";
	}
	else
	{
		event.srcElement.parentNode.className="";			
	}		
}

function tdOnclick(event)
{

 //alert(event.type);
  
	if(event.srcElement.checked)
	{ 
	    event.srcElement.parentNode.className="selected";
	}
	else
	{
		event.srcElement.parentNode.className="";			
	}		
}

//消息先传递到这，然后再到checkOnclick
function mouseup(event)
{ 
  try
  {  
   mySelector.endSelect(event);   
   if((event.srcElement.tagName=="INPUT")&&(event.srcElement.name=="checkbox"))
   {  
       return true;
   } 
	var recordList=mySelector.getJSONData();	
	
	for (var i=0;i<recordList.length;i++)
	{
		for (var j=0;j<recordList[i].length;j++)
		{
			var obj=recordList[i][j];				
			if(obj.children[0].checked)
			{			
			   if(recordList.length==1&&j==0)
			   {			      
			      obj.children[0].checked=false;				  
			   }
			}
			else
			{			
			     obj.children[0].checked=true;	
			}						
			
		}
	}
	
resetBackGround();
}catch(e){}
}

</script>
 </head>

<body οnlοad="init()"   >




<form name="form1" action="" method="" >

<table  id="testTable" border="0" cellspacing="0"  width="100%" cellpadding="5" οnmοuseοver="mySelector.doSelect(event)" onMouseDown="mySelector.startSelect(event)" onMouseUp="mouseup(event)"  >

<tr>
<td>&nbsp;<input name="checkbox"  type="checkbox" value="1"  onClick="checkOnclick(event)">小说标题</td>
<td>&nbsp;<input name="checkbox"  type="checkbox" value="2"  onClick="checkOnclick(event)">小说标题</td>
<td>&nbsp;<input name="checkbox"  type="checkbox" value="3"  onClick="checkOnclick(event)">小说标题</td>
<td>&nbsp;<input name="checkbox"  type="checkbox" value="4"  onClick="checkOnclick(event)">小说标题</td>
<td>&nbsp;<input name="checkbox"  type="checkbox" value="5"  onClick="checkOnclick(event)">小说标题</td>
<td>&nbsp;<input name="checkbox"  type="checkbox" value="6"  onClick="checkOnclick(event)">小说标题</td>
<td>&nbsp;<input name="checkbox"  type="checkbox" value="7"  onClick="checkOnclick(event)">小说标题</td>
<td>&nbsp;<input name="checkbox"  type="checkbox" value="8"  onClick="checkOnclick(event)">小说标题</td>
<td>&nbsp;<input name="checkbox"  type="checkbox" value="9"  onClick="checkOnclick(event)">小说标题</td>
</tr>
<tr>
<td>&nbsp;<input name="checkbox"  type="checkbox"  value="1"  onClick="checkOnclick(event)">小说标题</td>
<td>&nbsp;<input name="checkbox"  type="checkbox" value="2"  onClick="checkOnclick(event)">小说标题</td>
<td>&nbsp;<input name="checkbox"  type="checkbox" value="3"  onClick="checkOnclick(event)">小说标题</td>
<td>&nbsp;<input name="checkbox"  type="checkbox" value="4"  onClick="checkOnclick(event)">小说标题</td>
<td>&nbsp;<input name="checkbox"  type="checkbox" value="5"  onClick="checkOnclick(event)">小说标题</td>
<td>&nbsp;<input name="checkbox"  type="checkbox" value="6"  onClick="checkOnclick(event)">小说标题</td>
<td>&nbsp;<input name="checkbox"  type="checkbox" value="7"  onClick="checkOnclick(event)">小说标题</td>
<td>&nbsp;<input name="checkbox"  type="checkbox" value="8"  onClick="checkOnclick(event)">小说标题</td>
<td>&nbsp;<input name="checkbox"  type="checkbox" value="9"  onClick="checkOnclick(event)">小说标题</td>
</tr><tr>
<td>&nbsp;<input name="checkbox"  type="checkbox"  value="1"  onClick="checkOnclick(event)">小说标题</td>
<td>&nbsp;<input name="checkbox"  type="checkbox" value="2"  onClick="checkOnclick(event)">小说标题</td>
<td>&nbsp;<input name="checkbox"  type="checkbox" value="3"  onClick="checkOnclick(event)">小说标题</td>
<td>&nbsp;<input name="checkbox"  type="checkbox" value="4"  onClick="checkOnclick(event)">小说标题</td>
<td>&nbsp;<input name="checkbox"  type="checkbox" value="5"  onClick="checkOnclick(event)">小说标题</td>
<td>&nbsp;<input name="checkbox"  type="checkbox" value="6"  onClick="checkOnclick(event)">小说标题</td>
<td>&nbsp;<input name="checkbox"  type="checkbox" value="7"  onClick="checkOnclick(event)">小说标题</td>
<td>&nbsp;<input name="checkbox"  type="checkbox" value="8"  onClick="checkOnclick(event)">小说标题</td>
<td>&nbsp;<input name="checkbox"  type="checkbox" value="9"  onClick="checkOnclick(event)">小说标题</td>
</tr>
</table>
</form>

 </body>
</html>

xieronghua246

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页上框选复选框

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;列表区域选择Demo&lt;/title&gt;&lt;style&gt;body {font-size:12px; margin:0px;}table {
复制链接

扫一扫