用JS 实现类似Excel里面动态选择单元格的例子，从网上得到的例子，先记录在这里，以后参考用。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> JS拖动选择table里的单元格</title> <script src="https://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>" + " <div>" + (i + 1) + "</div>" + " <div>" + duration[i] + "</div>" + "</td>" + " <td>" + "<div count='1'>已约：1人</div><div>√</div>" + "</td>" + " <td>" + "<div count='0'>已约：0人</div><div>?</div>" + "</td>" + " <td>" + "<div count='1'>已约：1人</div><div>?</div>" + "</td>" + " <td>" + "<div count='0'>已约：0人</div><div>?</div>" + "</td>" + " <td>" + "<div count='0'>已约：0人</div><div>?</div>" + "</td>" + " <td>" + "<div count='0'>已约：0人</div><div>?</div>" + "</td>" + " <td>" + "<div count='0'>已约：0人</div><div>?</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 runat="server"> <br /> <div></div> <input type="text" value=" " /> <input type="button" value="上一周 " /> <input type="button" value="下一周 " /> <input type="button" value="全选 " /> <div> <table> <caption>我是表格标题</caption> <tbody> <tr> <th></th> <th><span>周一</span></th> <th><span>周二</span></th> <th><span>周三</span></th> <th><span>周四</span></th> <th><span>周五</span></th> <th><span>周六</span></th> <th><span>周日</span></th> </tr> </tbody> </table> <div> <ul> <li><span>□</span>表示已有教练预约 </li> <li><span>□</span>表示当前已预约，同时以“√”表示 </li> <li><span>□</span>表示可预约 </li> <li><span>□</span>表示未开放</li> </ul> </div> </div> </form> </body> </html>
运行效果：
