文档章节

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

boydreaming
 boydreaming
发布于 2017/09/02 23:57
字数 703
阅读 42
收藏 0
点赞 0
评论 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
普陀
程序员
3个简单的事情,使你的jQuery代码变得更加棒

     jQuery是现存最流行的(如果不是最多的)JavaScript库之一,并且大量的人使用它来做一些令人惊叹的事情。就个人而言,jQuery让我对学习JavaScript感到兴奋。问题是很多程序员不明白...

webstack前端栈 ⋅ 04/14 ⋅ 0

JavaWeb04-HTML篇笔记(五)

1.1 案例五:下拉列表的左右选择:1.1.1 需求: 在分类的修改的页面中,有某个分类下的所属的商品的信息.可以对这些商品信息进行选择. 1.1.2 分析:1.1.2.1 技术分析: 【JQuery的选择器】 1.1....

我是小谷粒 ⋅ 05/09 ⋅ 0

jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

鼠标移入移出效果 -- jQuery/Vue版

元素内遮罩层根据鼠标方向显示的效果比较常见,比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。 原文链接 实现思路 1、根据鼠标的位置定位在元素内出现的方向 2、...

bestvist ⋅ 前天 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 06/18 ⋅ 0

来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang ⋅ 05/24 ⋅ 0

Python自动化开发学习17-jQuery

jQuery学习之前 jQuery 是 JavaScript 的一个类库,类似 python 中的模块。 jQuery在线手册:http://jquery.cuishifeng.cn/ 官网:http://jquery.com/ 版本选择 目前jQuery有三个大版本:1.x...

骑士救兵 ⋅ 06/21 ⋅ 0

JavaWeb04-HTML篇笔记(三)

1.1 案例二:表格隔行换色的案例:1.1.1 需求: 对数据的表格进行隔行换色的显示效果,使用JQuery完成该效果. 1.1.2 分析:1.1.2.1 技术分析: 【JQuery的选择器】 基本过滤选择器: 如果样式...

我是小谷粒 ⋅ 05/08 ⋅ 0

jQuery函数attr()和prop()的区别

在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。 但不得不说的是,这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别...

Apirl ⋅ 05/16 ⋅ 0

JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

如何使用serverchan微信推送告警

之前实现推送告警信息到微信的方法有如下几种: 1、通过企业公众号实现----收费: 2、通过QQ邮箱,在微信平台上开启收到邮件进行提醒; 3、第三方告警平台API,一般也是收费的; 不过最近看文...

问题终结者 ⋅ 25分钟前 ⋅ 0

TCP的RPC

RPC就是远程方法调用(Remote Process Call ),包含了客户端和服务端,涉及了对象的序列化传输。 1.服务端启动,注册远程调用的类2.客户端发送请求信息包含类、方法、参数的一些信息、序列化传...

Cobbage ⋅ 46分钟前 ⋅ 0

IOS-UI UI初步代码布局添加事件

ISO开发界面,UI是必须学习的一部分,其实很早之前想学来了,一直没有沉下心来学习。看到IOS的代码风格和布局就别扭的不行,跟java代码和android布局比较显得不是那么方便,所以一直到现在。...

京一 ⋅ 56分钟前 ⋅ 0

浅谈OpenDaylight的二次开发

OpenDaylight作为一款开源SDN网络控制器,依托于强大的社区支持以及功能特性,成为了目前主流的SDN网络控制器开发平台。在比较稳定的OpenDaylight Helium版本中,已经为开发者提供了大量的网...

wangxuwei ⋅ 今天 ⋅ 0

API 开发中可选择传递 token 接口遇到的一个坑

在做 API 开发时,不可避免会涉及到登录验证,我使用的是jwt-auth 在登录中会经常遇到一个token过期的问题,在config/jwt.php默认设置中,这个过期时间是一个小时,不过为了安全也可以设置更...

等月人 ⋅ 今天 ⋅ 0

Java NIO之文件处理

程序要操作本地操作系统的一个文件,可以分为以下三个部分: 对文件位置的操作 对文件的操作 对文件内容的操作 其中,对文件内容的操作在 Java NIO之Channel 中已经有了介绍,通过FileChann...

士别三日 ⋅ 今天 ⋅ 0

Maven的pom.xml配置文件详解

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.......

小海bug ⋅ 今天 ⋅ 0

解决httpclient超时设置不生效的问题

最近公司有项目需要通过http调用第三方服务,且第三方服务偶有超时,故需要设置一定的超时时间防止不响应的情况出现。 初始设置如下: [java] view plain copy //超时设置 RequestConfig re...

Mr_Tea伯奕 ⋅ 今天 ⋅ 0

过滤器Filter和拦截器HandlerInterceptor

过滤器 依赖于servlet容器。在实现上基于函数回调,可以对几乎所有请求进行过滤,但是缺点是一个过滤器实例只能在容器初始化时调用一次。使用过滤器的目的是用来做一些过滤操作,获取我们想要...

hutaishi ⋅ 今天 ⋅ 0

Redis入门详解(转)

Redis入门详解 Redis简介 Redis安装 Redis配置 Redis数据类型 Redis功能 持久化 主从复制 事务支持 发布订阅 管道 虚拟内存 Redis性能 Redis部署 Redis应用场景 Redis总结 Redis简介: Redi...

xiaoyaoyoufang ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部