JS拖动选择table里的单元格完整实例【基于jQuery】
编程学习 2021-07-04 15:50www.dzhlxh.cn编程入门
这篇文章主要介绍了JS拖动选择table里的单元格,结合完整实例形式分析了基于jQuery的table表格动态操作相关实现技巧,涉及事件响应及页面元素属性动态操作使用方法,需要的朋友可以参考下
本文实例讲述了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();
/