首页
所有分类
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插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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
E1-XM(1) 矿石收音机(1) R601SW(1) 接收机(2) 沃尔沃(1) ETON(1) VOLVO(1) 放大器(1) S900(1) DSP(2)
You might like
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
js实现的网页颜色代码表全集
2007/07/17 Javascript
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
JQUERY获取form表单值的代码
2010/07/17 Javascript
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
Bootstrap模态框（Modal）实现过渡效果
2017/03/17 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
微信小程序用户位置权限的获取方法（拒绝后提醒）
2018/11/15 Javascript
使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）
2020/06/05 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
在Python中marshal对象序列化的相关知识
2015/07/01 Python
【python】matplotlib动态显示详解
2019/04/11 Python
优衣库美国官网：UNIQLO美国
2018/04/14 全球购物
美国羽绒床上用品第一品牌：Pacific Coast
2018/08/25 全球购物
Sunglasses Shop英国：欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
世界上最大的乐谱选择：Sheet Music Plus
2020/01/18 全球购物
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
企业环保标语
2014/06/10 职场文书
经济国贸专业求职信
2014/06/18 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
申请吧主发表的感言
2015/08/03 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server