文档章节

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

boydreaming
 boydreaming
发布于 2017/09/02 23:57
字数 703
阅读 49
收藏 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
普陀
程序员
私信 提问
9款风格华丽的jQuery/CSS3插件

今天向大家分享9款效果相当不错的jQuery/CSS3插件,不多说,直接来看看这些插件吧。 1、jQuery动画下拉菜单Smart Menu 这是一款基于jQuery的动画下拉菜单,子菜单外观比较时尚,鼠标移到菜单...

yykj
2014/01/06
560
1
《JavaScript实用效果整理》系列分享专栏

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

开元中国2015
2018/10/29
0
0
给开发者准备的 10 款最好的 jQuery 日历插件

这篇文章介绍的是 10 款最棒而且又很有用的 jQuery 日历插件,允许开发者们把这些漂亮的日历插件结合到自己的网站中。这些日历插件易用性都很强,轻轻松松的就可以把漂亮的日历插件装饰到你的...

oschina
2014/01/27
50.9K
10
JQuery插件开发教程 | WhyJQuery

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

柒月-小妖精
2013/11/14
0
1
jQuery插件开发 - 其实很简单

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

晨曦之光
2012/03/09
186
0

没有更多内容

加载失败,请刷新页面

加载更多

IDE 插件新版本发布,开发效率 “biu” 起来了

近日,Cloud Toolkit正式推出了面向 IntelliJ 和 Eclipse 两个平台的新款插件,本文挑选了其中三个重大特性进行解读,点击文末官网跳转链接,可查看详细的版本说明。 本地应用一键部署到任何...

阿里云官方博客
38分钟前
3
0
我是怎样和Linux系统结缘并通过红帽RHCE认证的

我高考完当时就是选择的计算机科学与技术专业,上大学以后联想到的和计算机相关的就只有写代码,开发,网站,网页设计,就没有其他的了,当时学习写代码也都是在Windows上,什么C#、C++之类的...

linuxprobe16
39分钟前
1
0
Coding and Paper Letter(四十四)

资源整理。 1 Coding: 1.Rstudio2019年会“机器学习应用”的幻灯片,代码和数据 rstudio conf 2019 2.R语言包sparkxgb,Spark上XGBoost的R接口。 sparkxgb 3.自动SQL注入和数据库接管工具。 ...

胖胖雕
今天
4
0
Ubuntu最新的主要操作系统放弃32位支持?

现在是2018年,2019年即将到来——64位处理器已经成为主流很长一段时间了。如果你仍然使用32位的电脑,那么是时候把它扔进垃圾箱了。 我为所有基于Linux的操作系统维护者感到自豪,他们有勇气...

Linux就该这么学
今天
3
0
Fundebug发布Vue插件,简化BUG监控接入代码

摘要: 代码越短越好! 我们发布了fundebug-vue插件,可以简化Vue框架接入Fundebug的代码。 Vue如何接入Fundebug 1. 安装fundebug-javascript与fundebug-vue npm install fundebug-javascrip...

Fundebug
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部