本文實例講述了JS拖動選擇table里的單元格。分享給大家供大家參考，具體如下：
用JS 實現類似Excel里面動態選擇單元格的例子，從網上得到的例子，先記錄在這里，以后參考用。
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>www.companysz.com 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(); //}); //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") + "人"); }); } //判斷是否重復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>我是表格標題</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>表示已有教練預約 </li> <li><span class="div-ISelect">□</span>表示當前已預約，同時以“√”表示 </li> <li><span>□</span>表示可預約 </li> <li><span class="div-unSelect">□</span>表示未開放</li> </ul> </div> </div> </form></body></html>運行效果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun測試上述代碼運行效果。
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery操作xml技巧總結》、《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結》、《jQuery擴展技巧總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
