本文实例讲述了JS拖动选择table里的单元格。分享给大家供大家参考，具体如下：

用JS 实现类似Excel里面动态选择单元格的例子，从网上得到的例子，先记录在这里，以后参考用。

www.jb51.net 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 = "

"

+ "

"

+ "

"

+ "

"

+ "

"

+ "

" + "

" + ""

+ "

" + "

" + ""

+ "

" + "

" + ""

+ "

" + "

" + ""

+ "

" + "

"

+ "

"

+ "

" + "

"

+ "

"

+ "

" + "

"

+ "

"

+ "

";

$("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 !!(parentNode.compareDocumentPosition(childNode) & 16);

}

}

运行效果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。