首页
所有分类
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中map函数的两种方式
Apr 07 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery条件分页 代替离线查询（附代码）
Aug 17 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 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
scss(1) Yolov5(1) Jmerte(1) TimePickerView(1) 自定义组件(1) click(1) vue-router-link(1) vue-cli3.x(1) KVM(1) 项目打包(2)
You might like
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
PHP中的事务使用实例
2015/05/26 PHP
php生成无限栏目树
2017/03/16 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
小程序实现列表多个批量倒计时
2021/01/29 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
详解在Python中处理异常的教程
2015/05/24 Python
python3 shelve模块的详解
2017/07/08 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
django 多数据库配置教程
2018/05/30 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
python实现自动化上线脚本的示例
2019/07/01 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
Python猜数字算法题详解
2020/03/01 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
大学生毕业求职简历的自我评价
2013/10/24 职场文书
公司业务主管岗位职责
2013/12/07 职场文书
周年庆典邀请函范文
2014/01/24 职场文书
捐款倡议书范文
2014/02/02 职场文书
教师试用期自我鉴定
2014/02/12 职场文书
安全生产计划书
2014/05/04 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书