JS拖動選擇table里的單元格完整實(shí)例【基于jQuery】
更新時間：2019年05月28日 11:35:39 作者：yihaomen
這篇文章主要介紹了JS拖動選擇table里的單元格,結(jié)合完整實(shí)例形式分析了基于jQuery的table表格動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,涉及事件響應(yīng)及頁面元素屬性動態(tài)操作使用方法,需要的朋友可以參考下
本文實(shí)例講述了JS拖動選擇table里的單元格。分享給大家供大家參考，具體如下：
用JS 實(shí)現(xiàn)類似Excel里面動態(tài)選擇單元格的例子，從網(wǎng)上得到的例子，先記錄在這里，以后參考用。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>chabaoo.cn 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:從后臺獲得結(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("該時間段已關(guān)閉禁止選擇");
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("該時間段已關(guān)閉禁止選擇");
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") + "人");
});
}
//判斷是否重復(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ù)約，同時以“√”表示 </li>
<li><span>□</span>表示可預(yù)約 </li>
<li><span class="div-unSelect">□</span>表示未開放</li>
</ul>
</div>
</div>
</form>
</body>
</html>
運(yùn)行效果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery操作xml技巧總結(jié)》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JS/jQuery實(shí)現(xiàn)超簡單的Table表格添加,刪除行功能示例
- jquery實(shí)現(xiàn)自定義樹形表格的方法【自定義樹形結(jié)構(gòu)table】
- PHP+jQuery實(shí)現(xiàn)雙擊修改table表格功能示例
- jQuery-ui插件sortable實(shí)現(xiàn)自由拖動排序
- 使用jQuery給Table動態(tài)增加行、清空table的方法
- js與jQuery實(shí)現(xiàn)獲取table中的數(shù)據(jù)并拼成json字符串操作示例
- jQuery實(shí)現(xiàn)table表格checkbox全選的方法分析
- jQuery+datatables插件實(shí)現(xiàn)ajax加載數(shù)據(jù)與增刪改查功能示例
- JQuery實(shí)現(xiàn)table中tr上移下移的示例(超簡單)
- 基于jQuery獲取table數(shù)據(jù)發(fā)送到后端
相關(guān)文章
Jquery遍歷select option和添加移除option的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫query遍歷select option和添加移除option的實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
jQuery實(shí)現(xiàn)菜單的顯示和隱藏功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)菜單的顯示和隱藏功能,結(jié)合實(shí)例形式分析了jQuery基于事件響應(yīng)及css方法動態(tài)改變菜單樣式的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
jQuery事件綁定on()與彈窗實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery事件綁定on()與彈窗實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-04-04
jquery實(shí)現(xiàn)背景墻聚光燈效果示例分享
這篇文章主要介紹了jquery實(shí)現(xiàn)背景墻聚光燈效果示例,需要的朋友可以參考下2014-03-03
基于JQuery實(shí)現(xiàn)相同內(nèi)容合并單元格的代碼
我們就中和下利用JQuery來和他一個table里面相同內(nèi)容的單元格，這里代碼跟大家分享下，希望對大家有用2011-01-01
jQuery Ajax和getJSON獲取后臺普通json數(shù)據(jù)和層級json數(shù)據(jù)用法分析
這篇文章主要介紹了jQuery Ajax和getJSON獲取后臺普通json數(shù)據(jù)和層級json數(shù)據(jù)用法,結(jié)合實(shí)例形式分析了jQuery基于ajax操作json格式數(shù)據(jù)的相關(guān)技巧,需要的朋友可以參考下2016-06-06
jQuery實(shí)現(xiàn)基本淡入淡出效果的方法詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)基本淡入淡出效果的方法,結(jié)合實(shí)例形式詳細(xì)分析了jQuery使用fadeIn()、fadeOut()及fadeToggle()等方法控制頁面元素淡入淡出顯示效果的相關(guān)操作技巧,需要的朋友可以參考下2018-09-09
這篇文章主要展示了jQuery網(wǎng)頁版打磚塊小游戲源碼，大家都一定玩過打磚塊這款小游戲，今天我們不僅要玩轉(zhuǎn)它，還要實(shí)現(xiàn)打磚塊小游戲，感興趣的小伙伴們可以參考一下2015-08-08
使用jQuery的ajax功能實(shí)現(xiàn)的RSS Reader 代碼
Rss閱讀器挺不錯的。我覺得如果在igoogle或是dropthings這種形式的portal下來放很多RSS模塊顯示自己每天需要關(guān)注的信息那將會減少大家很多的打開瀏覽器和輸入網(wǎng)址的時間。2009-09-09
基于JavaScript如何實(shí)現(xiàn)ajax調(diào)用后臺定義的方法
由于ajax的獨(dú)特優(yōu)勢，使得它在當(dāng)前大量網(wǎng)站得到了廣泛的應(yīng)用，下面就介紹一下ajax如何調(diào)用后臺定義的函數(shù)，對ajax調(diào)用后臺方法相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-12-12