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