`

网页上框选复选框

CC++C#J#F# 
阅读更多 
<!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 onload="init()"   >




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

<table  id="testTable" border="0" cellspacing="0"  width="100%" cellpadding="5" onmouseover="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>

 

分享到：
| 利用POI解析本地或者远程包含图片的WORD文 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    高德地图实现多边形框选选中地图中坐标点.html

    高德地图实现多边形框选，选中展示地图中坐标点。实现坐标点框选。范围内坐标点选择。包括矩形，圆形，和任意多边形。。。需要修改key为自己注册的开发key

    c# winform 用鼠标画拉出来的虚线框,鼠标框选边框效

    ### C# WinForms 实现鼠标绘制虚线框与选择效果 #### 一、概述 在 Windows Forms (WinForms) 应用程序开发中，经常需要实现用户交互功能，例如通过鼠标绘制虚线框来选择区域。本文将详细介绍如何在 C# 的 WinForms...

    字体识别 工具 直接框选就能用

    标题中的“字体识别工具 直接框选就能用”指的是这款软件的核心功能——字体识别，它允许用户通过简单地在屏幕上框选文字区域来进行识别。这项技术基于光学字符识别（OCR，Optical Character Recognition），是一种...

    c++/opencv手动画框选择目标，并输出目标

    在本项目中，我们主要探讨如何使用C++和OpenCV库来实现在图像上手动画框选择目标，并输出所选目标的图像以及其坐标。OpenCV（Open Source Computer Vision Library）是一个强大的开源计算机视觉和机器学习软件库，...

    用C# 实现鼠标框选效果的实现代码

    在C#编程中，实现鼠标框选效果是一项常见的需求，特别是在图形界面或者数据可视化应用中。本文将详细介绍如何使用C#来实现这一功能，并提供具体的代码示例。 首先，我们需要了解实现鼠标框选效果的基本步骤： 1. *...

    vue+iview+canvas 画框并改变大小

    登录后可直接操作 切换题目与答案画相应的框并拖动拉伸达到你所要的区域，还可以实时修改标题 运行环境 先运行npm install 再运行npm run dev 运行视频 链接: ...

    在Excel或Word文档方框中打勾符号的6种方法.docx

    在Word中，我们可以使用控件工具栏中的复选框控件来打勾符号。具体步骤是： 1. 右击工具栏，选择"控件工具栏"，打开控件工具栏。 2. 在控件工具栏中找到"复选框"控件，并单击它。 3. 在当前光标位置自动插入一个"复...

    在文档方框中打勾符号的6种方法.docx

    单击该控件，然后在当前光标位置自动插入一个“复选框”按钮和“CheckBox1”字符。此时，可以右键点击“复选框”对象，选择“编辑”，然后修改“CheckBox1”的文字内容。也可以右键点击该控件，选择“属性”，然后在...

    OpenCV实现鼠标在图像上框选单目标和多目标

    3. 单目标框选：在本文中，我们使用鼠标回调函数来实现单目标框选。当鼠标左键按下时，我们获取当前点坐标值，并将其显示在图像上。当鼠标左键弹起时，我们绘制矩形框在图像上，以框选单目标。 4. 多目标框选：在...

    CAD表格转换/提取至excel

    使用方法： 1.打开软件 2.打开一个Excel空白文件并最小...8.这时你会发现第二步骤中新建的Excel文件中已经出现了框选住的表格的Excel版本。 就是这么简单，好用得话评个分吧，第一次发帖，有不对的地方大家多包涵。

    leaflet-areaselect:用于让用户使用矩形选择地图区域并获得边界框的小叶插件

    传单区域选择 AreaSelect是一个传单插件，可让用户使用地图顶部可调整大小的居中框来选择正方形区域（边框）。 另一个类似的插件是 ，它解决了相同的问题，但提供了一个可移动且不固定在中心的矩形，但不支持保持宽...

    Position.rar

    《实现图片区域框选与缩放功能：OpenCV与鼠标操作》 在计算机视觉领域，对图像进行处理和分析时，我们经常需要在图片上进行框选操作，以选取特定的区域进行细致观察或处理。这通常涉及到图像的显示、交互以及区域...

    Leaflet.vgi:leaflet 对线进行标绘和编辑

    简介 使用leaflet在地图上进行标线，主要功能包含： 1、使用鼠标标绘线 2、提供经纬度数组自动绘制线 3、标绘完成的线会包含标绘时的箭头方向 4、可以通过拖拽节点调整线的位置，拖拽到指定节点可以实现节点合并 ...

    Leaflet.SelectAreaFeature:通过在地图上绘制区域来选择要素的插件

    作为开发人员，您可以获取该区域边界框中的图层。 一旦有了图层的实例，就可以单独操作它们。 特征 轻松启用 轻松禁用它 在物体周围画一个区域 获取所有选定对象的实例，或者仅获取多边形，折线，标记，矩形和圆的...

    JavaScript实现使用Canvas绘制图形的基本教程

    由于这两年HTML5火的正热，所以研究了一下，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。 好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能... 1、使用Canvas绘制直线： &lt;!...script type=

    C# wpf 使用DockPanel实现截屏框

    做桌面客户端的时候有时需要实现截屏功能，能够在界面上框选截屏，做一个蒙版然后中间选框透明可以移动和改变大小。这个功能是不太好实现的，需要一定的方法，其中使用DockPanel是相对简单直接的实现。本资源为文章...

    地图离线制作

    1. **选择区域**：用户首先需要确定想要离线使用的地图区域，这可以通过在地图界面上框选或输入经纬度范围来完成。 2. **下载数据**：然后，软件会连接到谷歌地图服务器，下载所选区域的卫星图像、道路网络、地形等...

    PictureContol_ROICut.rar

    基于VS2015和opencv4.1.1开发的，在其中一个PictureControl控件上显示原图，使用鼠标右键在原图上框选ROI区域，并在另一个PictureControl控件上动态显示所裁剪的ROI图像。

    react-image-hotspots:React组件，用于使用缩放控件和热点渲染图像

    React图像热点React组件，用于使用缩放控件和热点渲染图像。安装从npm安装并将其包含在项目构建过程中： npm install react-image-hotspots --save或从运行的Yarn安装： yarn add react-image-hotspots用法 import ...

Magicbox
Global site tag (gtag.js) - Google Analytics