JS拖动选择table里的单元格完整实例【基于jQuery】
程序员文章站
2024-02-09 23:23:58
本文实例讲述了js拖动选择table里的单元格。分享给大家供大家参考，具体如下：
用js 实现类似excel里面动态选择单元格的例子，从网上得到的例子，先记录在这里，以后...
本文实例讲述了js拖动选择table里的单元格。分享给大家供大家参考，具体如下：
用js 实现类似excel里面动态选择单元格的例子，从网上得到的例子，先记录在这里，以后参考用。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>www.jb51.net js拖动选择table里的单元格</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
.table-container {
width: 100%;
overflow-y: auto;
_overflow: auto;
margin: 0 0 1em;
background-color:white;
}
table {
border: 0;
border-collapse: collapse;
}
table td, table th {
border: 1px solid #999;
padding: .5em 1em;
}
/*添加ios下滚动条 */
.table-container::-webkit-scrollbar {
-webkit-appearance: none;
width: 14px;
height: 14px;
}
.table-container::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 3px solid #fff;
background-color: rgba(0, 0, 0, .3);
}
/*对齐*/
.table-time div {
text-align: center;
min-width: 104px;
}
.table-time, tr th {
background-color: #dbe5f1;
}
.table-time {
cursor: default !important;
}
.div-right {
text-align: right;
}
.div-unselect {
background-color: #d8d8d8;
}
.div-select {
background-color: #92d050;
}
.div-iselect {
background-color: #fbd4b4;
}
/*图例*/
ul li {
list-style: none;
float: left;
}
.table-container td {
cursor: pointer;
}
</style>
<script>
$(function () {
initform();
var monday = moment().startof('isoweek');
$("#txtmonday").val(monday.format("yyyy-mm-dd"));
renderweek(monday);
})
function initform() {
//初始化行
var duration = ["9:30~10：15", "10：30~11：15", "11：30~12：15", "13：30~14：15", "14：30~15：15", "15：30~16：15"];
$("tr td").parent().remove();
//todo:从后台获得结果
for (var i = 0; i < duration.length; i++) {
var temprow = " <tr>"
+ " <td class='table-time'>"
+ " <div>" + (i + 1) + "</div>"
+ " <div>" + duration[i] + "</div>"
+ "</td>"
+ " <td class='select div-iselect'>" + "<div count='1'>已约：1人</div><div class='div-right'>√</div>" + "</td>"
+ " <td class='select'>" + "<div count='0'>已约：0人</div><div class='div-right'>?</div>" + "</td>"
+ " <td class='select div-select'>" + "<div count='1'>已约：1人</div><div class='div-right'>?</div>" + "</td>"
+ " <td class='select'>" + "<div count='0'>已约：0人</div><div class='div-right'>?</div>" + "</td>"
+ " <td class='select div-unselect'>" + "<div count='0'>已约：0人</div><div class='div-right'>?</div>"
+ "</td>"
+ " <td class='select div-unselect'>" + "<div count='0'>已约：0人</div><div class='div-right'>?</div>"
+ "</td>"
+ " <td class='select div-unselect'>" + "<div count='0'>已约：0人</div><div class='div-right'>?</div>"
+ "</td>"
+ " </tr>";
$("table tbody").append(temprow);
}
var ismousedown = false,
ishighlighted,
tickets = [];
//添加点击事件
$(".select").mousedown(function () {
ismousedown = true;
var currenttd = $(this);
if (currenttd.hasclass("div-unselect")) {
//alert("该时间段已关闭禁止选择");
return;
}
if (currenttd.hasclass("table-time")) {
//alert("这是时间段禁止选择");
return;
}
var countdiv = $(currenttd.children()[0]);
var correctdiv = $(currenttd.children()[1]);
var count = 0;
if (currenttd.hasclass("div-iselect")) {
currenttd.removeclass("div-iselect");
count = number(countdiv.attr("count")) - 1;
correctdiv.html("?");
} else {
currenttd.addclass("div-iselect");
count = number(countdiv.attr("count")) + 1;
correctdiv.html("√");
}
countdiv.attr("count", count);
countdiv.html("已约：" + countdiv.attr("count") + "人");
ishighlighted = $(this).hasclass("div-iselect");
selected();
return false; // prevent text selection
})
.mouseover(function (e) {
if (checkhover(e, this)) {
if (ismousedown) {
var currenttd = $(this);
if (currenttd.hasclass("div-unselect")) {
//alert("该时间段已关闭禁止选择");
return;
}
if (currenttd.hasclass("table-time")) {
//alert("这是时间段禁止选择");
return;
}
var countdiv = $(currenttd.children()[0]);
var correctdiv = $(currenttd.children()[1]);
var count = 0;
if (currenttd.hasclass("div-iselect")) {
currenttd.removeclass("div-iselect");
count = number(countdiv.attr("count")) - 1;
correctdiv.html("?");
} else {
currenttd.addclass("div-iselect");
count = number(countdiv.attr("count")) + 1;
correctdiv.html("√");
}
countdiv.attr("count", count);
countdiv.html("已约：" + countdiv.attr("count") + "人");
selected();
}
}
});
$(document)
.mouseup(function () {
ismousedown = false;
//alert('deselected');
});
}
function selected() {
//tickets = $("div-iselect").map(function () {
// return $(this).text();
//});
//console.log(tickets.get().join());
}
//初始化日期
function renderweek(monday) {
$("#txtmonday").val(monday.format("yyyy-mm-dd"));
////获得这一周的所有日期
var myarray = new array()
myarray[0] = monday.format("mm-dd");
for (var i = 1; i < 7; i++) {
var temp = moment(myarray[i - 1]).add(1, "days").format("mm-dd");
myarray[i] = temp;
}
$("tr th:gt(0)").each(function (i) {
var weekstring = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
$(this).html("<span>" + weekstring[i] + " " + myarray[i] + "</span>");
});
$("caption").html(monday.format("yyyy-mm-dd") + "~" + monday.add(6, 'days').format("yyyy-mm-dd"));
}
//上一周
function lastweek() {
initform();
var currentday = moment($("#txtmonday").val());
var lastmonday = currentday.add(-1, 'weeks').startof('isoweek');//上周一
renderweek(lastmonday);
}
//下一周
function nextweek() {
initform();
var currentday = moment($("#txtmonday").val());
var nextmonday = currentday.add(1, 'weeks').startof('isoweek');//上周一
renderweek(nextmonday);
}
//全选
function selectall() {
$("tr td").each(function () {
var currenttd = $(this);
if (currenttd.hasclass("div-iselect") || currenttd.hasclass("div-unselect") || currenttd.hasclass("table-time")) {
return;
}
var countdiv = $(currenttd.children()[0]);
var correctdiv = $(currenttd.children()[1]);
var count = 0;
currenttd.addclass("div-iselect");
count = number(countdiv.attr("count")) + 1;
correctdiv.html("√");
countdiv.attr("count", count);
countdiv.html("已约：" + countdiv.attr("count") + "人");
});
}
//判断是否重复mouseover
function checkhover(e, target) {
if (getevent(e).type == "mouseover") {
return !contains(target, getevent(e).relatedtarget || getevent(e).fromelement) && !((getevent(e).relatedtarget || getevent(e).fromelement) === target);
} else {
return !contains(target, getevent(e).relatedtarget || getevent(e).toelement) && !((getevent(e).relatedtarget || getevent(e).toelement) === target);
}
} function getevent(e) {
return e || window.event;
}
function contains(parentnode, childnode) {
if (parentnode.contains) {
return parentnode != childnode && parentnode.contains(childnode);
} else {
return !!(parentnode.comparedocumentposition(childnode) & 16);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<br />
<div class="table-title"></div>
<input type="text" name="name" value=" " id="txtmonday" />
<input id="btnlastweek" type="button" name="name" value="上一周 " onclick="lastweek()" />
<input id="btnnextweek" type="button" name="name" value="下一周 " onclick="nextweek()" />
<input id="btnselectall" type="button" name="name" value="全选 " onclick="selectall()" />
<div class="table-container">
<table>
<caption>我是表格标题</caption>
<tbody>
<tr>
<th></th>
<th class="table-week"><span>周一</span></th>
<th class="table-week"><span>周二</span></th>
<th class="table-week"><span>周三</span></th>
<th class="table-week"><span>周四</span></th>
<th class="table-week"><span>周五</span></th>
<th class="table-week"><span>周六</span></th>
<th class="table-week"><span>周日</span></th>
</tr>
</tbody>
</table>
<div>
<ul>
<li><span class="div-select">□</span>表示已有教练预约 </li>
<li><span class="div-iselect">□</span>表示当前已预约，同时以“√”表示 </li>
<li><span>□</span>表示可预约 </li>
<li><span class="div-unselect">□</span>表示未开放</li>
</ul>
</div>
</div>
</form>
</body>
</html>
运行效果：
感兴趣的朋友可以使用在线html/css/javascript代码运行工具：http://tools.jb51.net/code/htmljsrun测试上述代码运行效果。
更多关于jquery相关内容感兴趣的读者可查看本站专题：《jquery表格(table)操作技巧汇总》、《jquery操作xml技巧总结》、《jquery form操作技巧汇总》、《jquery常用插件及用法总结》、《jquery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jquery程序设计有所帮助。
下一篇： Android实现图文垂直跑马灯效果