jquery 鼠標拖拽選擇單元格一例

時間 2019-11-16

原文原文鏈接

採用jquery鼠標拖拽多選擇表格中單元格，模擬EXCEL多選功能。javascript

<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>

1. 鼠標拖拽div元素
2. JavaScript 鼠標拖拽
3. table單元格拖拽(vue)
4. selenium-模擬鼠標拖拽
5. Extjs GridPanel 鼠標拖動選中單元格
6. html5的鼠標拖拽
7. JavaFX鼠標拖拽事件
8. javascript6鼠標拖拽圖片
9. 鼠標拖拽小知識
10. js鼠標拖拽事件
更多相關文章...
• jQuery Mobile 表單選擇菜單 - jQuery Mobile 教程
• ionic 單選框 - ionic 教程
• RxJava操作符（一）Creating Observables
• IntelliJ IDEA代碼格式化設置

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。