table+jq实现日期排期表

其他 2018-11-01 07:31:18 阅读次数: 0

1.html

<table cellpadding="0" cellspacing="0" border="0" class="scheduling-tb" width="100%">
   <thead>
      <tr>
         <td class="border"></td>
         <td>1日</td>
         <td>2日</td>
         <td>3日</td>
         <td>4日</td>
         <td>5日</td>
         <td>6日</td>
         <td>7日</td>
         <td>8日</td>
         <td>9日</td>
         <td>10日</td>
         <td>11日</td>
         <td>12日</td>
         <td>13日</td>
         <td>14日</td>
         <td>15日</td>
         <td>16日</td>
         <td>17日</td>
         <td>18日</td>
         <td>19日</td>
         <td>20日</td>
         <td>21日</td>
         <td>22日</td>
         <td>23日</td>
         <td>24日</td>
         <td>25日</td>
         <td>26日</td>
         <td>27日</td>
         <td>28日</td>
         <td>29日</td>
         <td>30日</td>
         <td>31日</td>
      </tr>
   </thead>
   <tbody>
      <tr class="c-1">
         <td class="border">
            <p class="ellipsis" title="项目一项目一项目一项目一项目一项目一">项目一项目一项目一项目一项目一项目一</p>
            <div class="tool-tips">
               项目一
               <p>开始时间：2017-12-10</p>
               <p>结束时间：2018-01-20</p>
               <p>负责人：张星星</p>
               <p>审核人：周星星</p>
               <p>参与人：卢星星、陈星星</p>
            </div>
         </td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
      </tr>
      <tr class="c-2">
         <td class="border">
            <p class="ellipsis" title="项目二">项目二</p>
            <div class="tool-tips">
               项目二
               <p>开始时间：2017-12-10</p>
               <p>结束时间：2018-01-20</p>
               <p>负责人：张星星</p>
               <p>审核人：周星星</p>
               <p>参与人：卢星星、陈星星</p>
            </div>
         </td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
      </tr>
      <tr class="c-3">
         <td class="border">
            <p class="ellipsis" title="项目三">项目三</p>
            <div class="tool-tips">
               项目三
               <p>开始时间：2017-12-10</p>
               <p>结束时间：2018-01-20</p>
               <p>负责人：张星星</p>
               <p>审核人：周星星</p>
               <p>参与人：卢星星、陈星星</p>
            </div>
         </td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
      </tr>
      <tr class="c-4">
         <td class="border">
            <p class="ellipsis" title="项目四">项目四</p>
            <div class="tool-tips">
               项目四
               <p>开始时间：2017-12-10</p>
               <p>结束时间：2018-01-20</p>
               <p>负责人：张星星</p>
               <p>审核人：周星星</p>
               <p>参与人：卢星星、陈星星</p>
            </div>
         </td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
      </tr>
      <tr class="c-5">
         <td class="border">
            <p class="ellipsis" title="项目五">项目五</p>
            <div class="tool-tips">
               项目五
               <p>开始时间：2017-12-10</p>
               <p>结束时间：2018-01-20</p>
               <p>负责人：张星星</p>
               <p>审核人：周星星</p>
               <p>参与人：卢星星、陈星星</p>
            </div>
         </td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
      </tr>
      <tr class="c-6">
         <td class="border">
            <p class="ellipsis" title="项目六">项目六</p>
            <div class="tool-tips">
               项目六
               <p>开始时间：2017-12-10</p>
               <p>结束时间：2018-01-20</p>
               <p>负责人：张星星</p>
               <p>审核人：周星星</p>
               <p>参与人：卢星星、陈星星</p>
            </div>
         </td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
      </tr>
      <tr class="c-7">
         <td class="border">
            <p class="ellipsis" title="项目七">项目七</p>
            <div class="tool-tips">
               项目七
               <p>开始时间：2017-12-10</p>
               <p>结束时间：2018-01-20</p>
               <p>负责人：张星星</p>
               <p>审核人：周星星</p>
               <p>参与人：卢星星、陈星星</p>
            </div>
         </td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
      </tr>
      <tr class="c-8">
         <td class="border">
            <p class="ellipsis" title="项目八">项目八</p>
            <div class="tool-tips">
               项目八
               <p>开始时间：2017-12-10</p>
               <p>结束时间：2018-01-20</p>
               <p>负责人：张星星</p>
               <p>审核人：周星星</p>
               <p>参与人：卢星星、陈星星</p>
            </div>
         </td>
         <td></td>
         <td></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
      </tr>
      <tr class="c-9">
         <td class="border">
            <p class="ellipsis" title="项目九">项目九</p>
            <div class="tool-tips">
               项目九
               <p>开始时间：2017-12-10</p>
               <p>结束时间：2018-01-20</p>
               <p>负责人：张星星</p>
               <p>审核人：周星星</p>
               <p>参与人：卢星星、陈星星</p>
            </div>
         </td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td></td>
         <td></td>
         <td></td>
      </tr>
      <tr class="c-10">
         <td class="border">
            <p class="ellipsis" title="项目十">项目十</p>
            <div class="tool-tips">
               项目十
               <p>开始时间：2017-12-10</p>
               <p>结束时间：2018-01-20</p>
               <p>负责人：张星星</p>
               <p>审核人：周星星</p>
               <p>参与人：卢星星、陈星星</p>
            </div>
         </td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td class="on"></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
         <td></td>
      </tr>
   </tbody>
</table>

2.css

.scheduling-tb thead td{border-top:0;}
.scheduling-tb td{height:38px;text-align:center;border:1px solid #edf2f6;border-left:0;border-top:0;color:#a0abbf;}
.scheduling-tb .border{width:7%;border-left:0;border-bottom:0;}
.scheduling-tb .border .ellipsis{float:right;max-width:90px;padding-right:10px;text-align:right;}
.scheduling-tb thead td{border:0;border-bottom:1px solid #edf2f6;}
.scheduling-tb .on{cursor:pointer;}
.scheduling-tb .c-1 .on{background-color:#ffc46c;}
.scheduling-tb .c-2 .on{background-color:#ffb362;}
.scheduling-tb .c-3 .on{background-color:#ffa46b;}
.scheduling-tb .c-4 .on{background-color:#ff9676;}
.scheduling-tb .c-5 .on{background-color:#ff8d83;}
.scheduling-tb .c-6 .on{background-color:#f78994;}
.scheduling-tb .c-7 .on{background-color:#e189ab;}
.scheduling-tb .c-8 .on{background-color:#ca8ac4;}
.scheduling-tb .c-9 .on{background-color:#b18ddb;}
.scheduling-tb .c-10 .on{background-color:#9d91f0;}
.scheduling-tb .tool-tips{display:none;position:absolute;padding:10px;line-height:20px;background-color:rgba(0, 0, 0, 0.4);border-radius:6px;color:#fff;text-align:left;white-space:nowrap;}

3.js

 // 工程排期
   var x = 75,y = 20;
$.each($('.scheduling-tb tr'),function(i){
       var curEle = $(this).children('.on'),
      toolTips = $(this).find('.tool-tips');

       curEle.mouseover(function(e){ //当鼠标指针从元素上移入时
           if(i == 9 || i == 10){
               toolTips.css({"top": (e.pageY - 55) + "px", "left": (e.pageX - x) + "px" }).show();
      }else if(i == 8){
               toolTips.css({"top": (e.pageY + 15) + "px", "left": (e.pageX - x) + "px" }).show();
      }else{
               toolTips.css({"top": (e.pageY + y) + "px", "left": (e.pageX - x) + "px" }).show();
      }
       }).mouseout(function(){ //当鼠标指针从元素上移开时
           toolTips.stop(true,true).hide();
       }).mousemove(function (e){ //当鼠标指针从元素上移动时
           if(i == 9|| i == 10){
               toolTips.css({"top": (e.pageY - 155) + "px", "left": (e.pageX - x) + "px" }).show();
           }else if(i == 8){
               toolTips.css({"top": (e.pageY + 15) + "px", "left": (e.pageX - x) + "px" }).show();
           }else{
               toolTips.css({"top": (e.pageY + y) + "px", "left": (e.pageX - x) + "px" }).show();
      }
       });
});

附图：




猜你喜欢

转载自blog.csdn.net/caiyongshengCSDN/article/details/79402632
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022