文档章节

jquery 鼠标拖拽选择单元格一例

boydreaming
 boydreaming
发布于 2017/09/02 23:57
字数 703
阅读 48
收藏 0

采用jquery鼠标拖拽多选择表格中单元格,模拟EXCEL多选功能。

<TITLE>DID号码选择</TITLE><HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<TITLE>DID号码选择</TITLE>
<script type="text/javascript" src="/plugin/javascript/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="templates/buttons.css">
<style>
.txt {
	font-size:24px;
  color:black;
	text-align:center;
	width:130px;
	font-weight:bold;
	border:1px
}
table#tb {
		text-align:center;
		border:1px #ccc solid;
		border-collapse:collapse;
		font-size:18px;
		color:#666;
		width:600px;
}
table#tb td {
	border-bottom:#ccc 1px solid;
	padding:.3em 0.3em 0;
	border-right:#ccc 1px solid;
	cursor:default;
}

#tb th {
		height:30px;
		color:#009;
		padding-right:16px;
}
#tb thead th{
			border-bottom:#ccc 1px solid;
  		border-right:#ffffff 1px solid;
			background-color:#ccc;
}

#tb td.highLight{color:#000;}
#tb tfoot{
		font-weight:bold;
		color:#06F;
}
#container {margin-top: 10px;margin-left:10px;width: 1000px;border: 1px red solid;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

</style>

</HEAD>
<BODY>
	<center>
		<input type=text id=didstart value=22154800 readonly class=txt>------<input type=text id=didend value=22154999 readonly class=txt><BR>
	<a href="./didselect.php?action=select&id=1"><img src="../../images/refresh.jpg" width=16 height=16 border=0>刷新列表</a> 
	<input class="button button-action button-pill" type=button name=sub value="确认提交" onclick="submitselect()"> <input class="button button-action button-pill" type=button name=sub value="返回" onclick="history.go(-1);">

	<table id="tb">
		<TR><TD id=22154800 style='background-color:gray'>22154800</TD><TD id=22154801 >22154801</TD><TD id=22154802 >22154802</TD><TD id=22154803 >22154803</TD><TD id=22154804 >22154804</TD><TD id=22154805 >22154805</TD><TD id=22154806 >22154806</TD><TD id=22154807 >22154807</TD><TD id=22154808 >22154808</TD><TD id=22154809 >22154809</TD></TR><TR><TD id=22154810 style='background-color:gray'>22154810</TD><TD id=22154811 >22154811</TD><TD id=22154812 >22154812</TD><TD id=22154813 >22154813</TD><TD id=22154814 >22154814</TD><TD id=22154815 >22154815</TD><TD id=22154816 >22154816</TD><TD id=22154817 >22154817</TD><TD id=22154818 >22154818</TD><TD id=22154819 >22154819</TD></TR><TR><TD id=22154820 style='background-color:gray'>22154820</TD><TD id=22154821 >22154821</TD><TD id=22154822 >22154822</TD><TD id=22154823 >22154823</TD><TD id=22154824 >22154824</TD><TD id=22154825 >22154825</TD><TD id=22154826 >22154826</TD><TD id=22154827 >22154827</TD><TD id=22154828 >22154828</TD><TD id=22154829 >22154829</TD></TR><TR><TD id=22154830 style='background-color:gray'>22154830</TD><TD id=22154831 >22154831</TD><TD id=22154832 >22154832</TD><TD id=22154833 >22154833</TD><TD id=22154834 >22154834</TD><TD id=22154835 >22154835</TD><TD id=22154836 style='background-color:gray'>22154836</TD><TD id=22154837 >22154837</TD><TD id=22154838 >22154838</TD><TD id=22154839 >22154839</TD></TR><TR><TD id=22154840 >22154840</TD><TD id=22154841 >22154841</TD><TD id=22154842 >22154842</TD><TD id=22154843 style='background-color:gray'>22154843</TD><TD id=22154844 >22154844</TD><TD id=22154845 >22154845</TD><TD id=22154846 style='background-color:gray'>22154846</TD><TD id=22154847 >22154847</TD><TD id=22154848 >22154848</TD><TD id=22154849 >22154849</TD></TR>
	</table>
	<script type="text/javascript">
		document.onselectstart=function(){return false;}
		msie = /msie/.test(navigator.userAgent.toLowerCase());
		$("td").mousedown(function() {
			changecolor(this);
			$("td").mouseup(onMouseUp);
	    $("td").mouseover(onMouseOver);
		})
		function onMouseUp(){
 			$("td").unbind('mouseover',onMouseOver);
     	$("td").unbind('mouseup',onMouseUp);
   	}
   	function onMouseOver (argument) {
      changecolor(this);
	 	}

    function submitselect() {
			var start=$("#didstart").val();
			var end=$("#didend").val();
			selectlog="";
			for (var i=start;i<=end;i++) {
				rgb=$("#"+i).css("background-color");
				if ((msie)&&(rgb=="red"))
        	selectlog+=i+",";
				if ((!msie)&&(rgb=="rgb(255, 0, 0)"))
					selectlog+=i+",";
			}
			if (selectlog=="") {
				alert("没有选择号码!");
				return false;
			}

			$.post("./didselect.php?action=postselect",{didselected:selectlog,id:1},function(data,status){
				if (status=="success") alert("提交成功!"); else alert("提交失败!");window.location.href='./didselect.php';});
		}
    
		function hex(x) {
			return ("0" + parseInt(x).toString(16)).slice(-2);
		}

		function changecolor(obj) {
			v_color=$(obj).css("background-color");
			if ((v_color=="transparent")||(v_color=="rgba(0, 0, 0, 0)"))
				$(obj).css("background-color","red");
			else if ((v_color!="gray")&&(msie))
				$(obj).css("background-color","transparent");
			else if ((v_color!="rgb(128, 128, 128)")&&(!msie)) {
				$(obj).css("background-color","transparent");
			}
		}	
	</script>
	</center>
</BODY>

 

© 著作权归作者所有

共有 人打赏支持
boydreaming
粉丝 3
博文 68
码字总数 17343
作品 0
普陀
程序员
私信 提问
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
10/29
0
0
JQuery插件开发教程 | WhyJQuery

【前言】 jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件,经常有人询问一些技巧,因此干脆写这么一篇...

柒月-小妖精
2013/11/14
0
1
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
11/04
0
0
JQuery Tree v2.6正式版推荐

zTree v2.6正式版对比v2.6.beta来说修改的地方不多,主要是修改了几个Bug。另外对于check功能做了一定完善,希望使用checkbox或radio,但部分节点不显示checkbox/radio的朋友们,使用v2.6正式...

zyyutian_1
2011/06/10
0
1
使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用

日期:2011/11/19 来源:GBin1.com 昨天我们介绍了一款HTML5文件上传的jQuery插件:jQuery HTML5 uploader ,今天我们将开发一个简单的叫upload center的图片上传程序,允许用户使用拖拽方式...

gbin1
2011/11/19
0
1

没有更多内容

加载失败,请刷新页面

加载更多

使用JavaScript编写iOS应用业务逻辑

JSAUIKitCocoa使你可以使用JavaScript编写对性能要求不高但可能变动性很大的iOS应用的业务逻辑部分,View组件、需要多线程支持的Model等则直接使用原生对象。 编写方式与React Native相似,但...

neal01
32分钟前
1
0
艺术品区块链溯源防伪平台(连载一)

Netkiller Blockchain 手札 作者正在找工作,联系方式 13113668890 Mr. Neo Chan, 陈景峯(BG7NYT) 中国广东省深圳市望海路半岛城邦三期 518067 +86 13113668890 <netkiller@msn.com> 文档始创...

netkiller-
32分钟前
7
0
0032-如何在CDH启用Kerberos的情况下安装及使用Sentry(二)

温馨提示:要看高清无码套图,请使用手机打开并单击图片放大查看。 5.Sentry列权限管理 1.在集群所有节点添加fayson_r用户 [root@ip-172-31-6-148 cdh-shell-bak]# useradd fayson_r[root@i...

Hadoop实操
36分钟前
1
0
Nginx配置中Location的优先级

根据Nginx的官方文档,Location标签一共有四个修饰符,分别是: (1) =:表示完全匹配; (2) ^~:匹配URI的前缀,并且后面的正则表达式不再匹配,如果一个URI同时满足两个规则的话,匹配最长的规...

cloes
昨天
4
0
Xcode 10 Archive 卡死问题

前段时间贪新鲜更新了xcode 10,发现就是自己没事找事后悔啊........ 首先是 libstdc++.6.0.9.tbd 已不被使用,以前的项目是一顿报错!!!一个个改也不是办法还有一些第三方的用到只好把lib...

壹峰
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部