首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

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

Posted in jQuery onMay 28, 2019

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

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

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

运行效果：

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

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

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

- Author -

yihaomen

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
jQuery实现的淡入淡出图片轮播效果示例
Aug 29 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
jquery插件实现图片悬浮
Apr 16 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 #jQuery
jquery操作select常见方法大全【7种情况】
May 28 #jQuery
jQuery实现高级检索功能
May 28 #jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 #jQuery
jquery实现动态创建form并提交的方法示例
May 27 #jQuery
jquery实现动态改变css样式的方法分析
May 27 #jQuery
通过jQuery学习js类型判断的技巧
May 27 #jQuery
高放电路(1) RP-F11(1) 实习报告(1) 频率(1) 数调机(1) 灵敏度(1) 鉴频器(1) 手调机(1) 频偏(1) TOSHIBA(1)
You might like
php下Memcached入门实例解析
2015/01/05 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
php实现数字补零的方法总结
2018/09/12 PHP
javascript 匿名函数的理解（透彻版)
2010/01/28 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
全球性的在线时尚男装零售商：boohooMAN
2016/12/17 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
HR喜欢的自荐信格式
2013/10/08 职场文书
物理教学随笔感言
2014/02/22 职场文书
学员自我鉴定
2014/03/19 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
学校课外活动总结
2014/05/08 职场文书
护士心得体会范文
2016/01/25 职场文书
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python