JS拖動選擇table里的單元格完整實例【基于jQuery】

2019-11-19 11:26:45

字體：大中小

來源：轉載

供稿：網友

本文實例講述了JS拖動選擇table里的單元格。分享給大家供大家參考，具體如下：

用JS 實現類似Excel里面動態選擇單元格的例子，從網上得到的例子，先記錄在這里，以后參考用。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>www.49028c.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>

運行效果：