css:
table.table-custom { width: 100%; height: auto; border-top: 1px solid #808080; border-left: 1px solid #808080; } table.table-custom tr:nth-child(odd) td { background: #fafafa!important; } table.table-custom tr:nth-child(even) td { background: #e0e1e5!important; } table.table-custom td { height: 26px; font-size: 12px; box-sizing: border-box; border-bottom: 1px solid #808080; border-right: 1px solid #808080; } table.table-custom td.left-title { width: 86px; font-weight: bold; } table.table-custom td.text-info { padding: 0px 5px 0px 5px; text-align: left; }
js:
eventMouseover:function(event){//鼠标悬停 //获取鼠标坐标 var eTop=$(this).offset().top; var eRight=$(this).offset().left; var id=event.id; $.ajax({ url:"${base}/product/mywork/ScheduleResource/getScheduleDataDetail.do", type:"post", data:{entityId:id}, success:function(data){ if(data){ $("#contentShow").empty(); var tableObj = "<table class='table-custom' cellspacing='0' cellpadding='0'>" + "<tr>" + "<td class='left-title'>类型:</td>" + "<td class='text-info'>"+data.meaning+"</td>" + "</tr>"+ "<tr>" + "<td class='left-title'>标题:</td>" + "<td class='text-info'>"+data.title+"</td>" + "</tr>"+ "<tr>" + "<td class='left-title'>开始时间:</td>" + "<td class='text-info'>"+data.startDate+"</td>" + "</tr>"+ "<tr>" + "<td class='left-title'>结束时间:</td>" + "<td class='text-info'>"+data.endDate+"</td>" + "</tr>"+ "</table>"; $("#contentShow").css({'top':(eTop + 20)+'px','left':(eRight)+'px'}).show(); $("#contentShow").append(tableObj); } } }) }, eventMouseout:function(event){//鼠标悬停 $("#contentShow").hide(); }
效果: