JS拖动选择 table 里的单元格
asuncool@gmail.com(yihaomen)发表于 2017-04-13 22:23:23
用JS 实现类似Excel里面动态选择单元格的例子，从网上得到的例子，先记录在这里，以后参考用。
程序代码
<html>
<head>
<script id="jquery_183" type="text/javascript" class="library" src="jquery-1.8.3.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>
<head>
<script id="jquery_183" type="text/javascript" class="library" src="jquery-1.8.3.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>