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(); } }); });
附图: