本文实例讲述了JS拖动选择table里的单元格。分享给大家供大家参考，具体如下：
用JS 实现类似Excel里面动态选择单元格的例子，从网上得到的例子，先记录在这里，以后参考用。
JS拖动选择table里的单元格
.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;
}
$(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 = "
"
+ "
"
+ "
" + (i + 1) + ""
+ "
" + duration[i] + ""
+ "
"
+ "
" + "已约：1人√" + ""
+ "
" + "已约：0人?" + ""
+ "
" + "已约：1人?" + ""
+ "
" + "已约：0人?" + ""
+ "
" + "已约：0人?"
+ "
"
+ "
" + "已约：0人?"
+ "
"
+ "
" + "已约：0人?"
+ "
"
+ "
";
$("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("" + weekString[i] + " " + myArray[i] + "");
});
$("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 !!(pareDocumentPosition(childNode) & 16);
}
}
□表示已有教练预约 □表示当前已预约，同时以“√”表示 □表示可预约 □表示未开放
运行效果：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家jQuery程序设计有所帮助。
