首页
所有分类
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选择器之表单元素选择器详解
Sep 19 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
jQuery添加新内容的四个常用方法分析【append，prepend，after，before】
Mar 19 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 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
肯尼亚购物网站(2) 墨西哥购物网站(16) 埃及购物网站(2) 俄罗斯购物网站(137) 丹麦购物网站(22) 法国购物网站(144) 印尼购物网站(37) 台湾购物网站(77) 澳大利亚购物网站(309) 意大利购物网站(128)
You might like
基于文本的留言簿
2006/10/09 PHP
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
在php MYSQL中插入当前时间
2008/04/06 PHP
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
PHP制作万年历
2015/01/07 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
某页码显示的helper 少量调整，另附js版
2010/09/12 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
Python实现的用户登录系统功能示例
2018/02/05 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
英国领先的在线高尔夫设备零售商：Golfgeardirect
2020/12/11 全球购物
Python文件操作的面试题
2013/06/22 面试题
如何安装ruby on rails
2014/02/09 面试题
班长岗位职责
2013/11/10 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
小学运动会报道稿
2014/10/04 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
早会开场白台词大全
2015/06/01 职场文书
三八节活动简报
2015/07/20 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
大学生党课心得体会
2016/01/07 职场文书
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python