主页 / 网络编程 /

JS拖动选择table里的单元格完整实例【基于jQuery】

网络编程 2021-07-04 15:50www.168986.cn编程入门
这篇文章主要介绍了JS拖动选择table里的单元格,结合完整实例形式分析了基于jQuery的table表格动态操作相关实现技巧,涉及事件响应及页面元素属性动态操作使用方法,需要的朋友可以参考下

本文实例讲述了JS拖动选择table里的单元格。分享给大家供大家参考，具体如下

用JS 实现类似Excel里面动态选择单元格的例子，从网上得到的例子，先记录在这里，以后参考用。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.jb51. JS拖动选择table里的单元格</title>
  <script src="http://libs.baidu./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~1015", "1030~1115", "1130~1215", "1330~1415", "1430~1515", "1530~1615"];
      $("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();
      /
上一篇：Vue2.x通用编辑组件的封装及应用详解 下一篇：小程序多图列表实现性能优化的方法步骤

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by