JS拖动选择 table 里的单元格

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

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

<html>
<head>
   <script id="jquery_183" type="text/javascript" class="library" src="jquery-1.8.3.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>


上一篇: Spring boot 非web版(jar)入门配置程序-maven工程源码
下一篇: POI excel 设置单元格格式
 评论 ( What Do You Think )
名称
邮箱
网址
评论
验证
   
 

 


  • 微信公众号

  • 我的微信

站点声明:

1、一号门博客CMS,由Python, MySQL, Nginx, Wsgi 强力驱动

2、部分文章或者资源来源于互联网, 有时候很难判断是否侵权, 若有侵权, 请联系邮箱:summer@yihaomen.com, 同时欢迎大家注册用户,主动发布无版权争议的 文章/资源.

3、鄂ICP备14001754号-3, 鄂公网安备 42280202422812号