溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“JS如何拖動(dòng)選擇table里的單元格”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JS如何拖動(dòng)選擇table里的單元格”這篇文章吧。
具體如下：
用JS 實(shí)現(xiàn)類似Excel里面動(dòng)態(tài)選擇單元格的例子，從網(wǎng)上得到的例子，先記錄在這里，以后參考用。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net JS拖動(dòng)選擇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下滾動(dòng)條 */
.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);
}
/*對(duì)齊*/
.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:從后臺(tái)獲得結(jié)果
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 = [];
//添加點(diǎn)擊事件
$(".select").mousedown(function () {
isMouseDown = true;
var currentTD = $(this);
if (currentTD.hasClass("div-unSelect")) {
//alert("該時(shí)間段已關(guān)閉禁止選擇");
return;
}
if (currentTD.hasClass("table-time")) {
//alert("這是時(shí)間段禁止選擇");
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("該時(shí)間段已關(guān)閉禁止選擇");
return;
}
if (currentTD.hasClass("table-time")) {
//alert("這是時(shí)間段禁止選擇");
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") + "人");
});
}
//判斷是否重復(fù)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>我是表格標(biāo)題</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>表示已有教練預(yù)約 </li>
<li><span class="div-ISelect">□</span>表示當(dāng)前已預(yù)約，同時(shí)以“√”表示 </li>
<li><span>□</span>表示可預(yù)約 </li>
<li><span class="div-unSelect">□</span>表示未開放</li>
</ul>
</div>
</div>
</form>
</body>
</html>運(yùn)行效果：
以上是“JS如何拖動(dòng)選擇table里的單元格”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼