首页
所有分类
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 EasyUI $.Parser
Jun 02 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jquery实现手风琴案例
May 04 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jQuery实现视频展示效果
May 30 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
Vite(1) callback(1) hook(1) 字符画(1) 脚本(1) 热力图(1) cudn(1) dict(1) expdp(1) cudnn(1)
You might like
PHP 进程锁定问题分析研究
2009/11/24 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
跟我学Laravel之请求与输入
2014/10/15 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
Jquery Easyui选项卡组件Tab使用详解（10）
2016/12/18 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
详解微信小程序支付流程与梳理
2019/07/16 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
[02:57]DOTA2亚洲邀请赛 SECRET战队出场宣传片
2015/02/07 DOTA
python paramiko实现ssh远程访问的方法
2013/12/03 Python
Python 爬虫图片简单实现
2017/06/01 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
当当网官方旗舰店：中国图书销售夺金品牌
2018/04/02 全球购物
中国双语服务优势的在线购票及活动平台：247tickets
2018/10/26 全球购物
奥地利度假券的专家：we-are.travel
2019/04/10 全球购物
Solid & Striped官网：美国泳装品牌
2019/06/19 全球购物
Kusmi茶美国官网：优质散叶茶和茶包
2019/10/13 全球购物
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题？
2014/10/03 面试题
什么是数据抽象
2016/11/26 面试题
麦当劳辞职信范文
2014/01/18 职场文书
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
法院答辩状格式
2015/05/22 职场文书
民事二审代理词
2015/05/25 职场文书
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android
win sever 2022如何占用操作主机角色
2022/06/25 Servers