<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta content="telephone=no" name="format-detection" />
<title></title>
<script src="js/jquery-3.3.0.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
}
.tab{
width:900px;
margin: 0 auto;
position: relative;
}
.active{display: inline-block;
width: 20px;
height: 20px;
background-color: red;
text-align: center;
line-height: 20px;
color: #fff;
border-radius: 50%;
}
td{
text-align: center;
}
</style>
<script>
$(function () {
var tbody= $("#tbody");
var str='';
var arr=[3,2,5,4,7,9,1,6,8,3,2,5,4,7,9,7,8,8];
var span=function (le,le1) {
if(le==le1){
return '<span class="active">'+le1+'</span>';
}else {
return le1;
}
}
for (let i=0;i<arr.length;i++) {
str+='<tr id="'+i+'">' +
'<td>'+span(arr[i],0)+'</td>' +
'<td>'+span(arr[i],1)+'</td>' +
'<td>'+span(arr[i],2)+'</td>' +
'<td>'+span(arr[i],3)+'</td>' +
'<td>'+span(arr[i],4)+'</td>' +
'<td>'+span(arr[i],5)+'</td>' +
'<td>'+span(arr[i],6)+'</td>' +
'<td>'+span(arr[i],7)+'</td>' +
'<td>'+span(arr[i],8)+'</td>' +
'<td>'+span(arr[i],9)+'</td>' +
'</tr>';
}
var s= $(str).appendTo(tbody);
$(".active",s).hover(function () {
var setoff=$(this).offset();
console.log(setoff.top,setoff.left)
});
var arr=[];
$.each($(".active",tbody),function () {
var setoff=$(this).offset();
var jo={"top":setoff.top,"left":setoff.left,id:$(this).parent().parent().attr("id"),w:$(this).width(),h:$(this).height()};
arr.push(jo);
});
for(let a=arr.length-1;a>0;a--){
var c=document.createElement("canvas");
var wLeft=tbody.offset().left;
var wTop=tbody.offset().top;
var st=arr[a];
var pr=arr[a-1];
var cTop=Math.min(st.top,pr.top);
var cLeft=Math.min(st.left,pr.left);
var cw,cuLeft,ch,cuTop,mToLeft,mToTop,liToLeft,liToTop;
var activeH=st.h/2;
if(st.left<pr.left){
cw= pr.left-st.left-st.h;
cuLeft= st.left-wLeft+st.h;
ch=st.top-pr.top;
cuTop=pr.top-wTop+activeH;
mToLeft=pr.left-cLeft;
mToTop=pr.top-cTop;
liToLeft=st.left-cLeft;
liToTop=st.top-cTop;
}else if(st.left==pr.left){
cw= st.w;
cuLeft=st.left-wLeft;
ch=(st.top-pr.top)/2+5;
cuTop=pr.top-wTop+st.h;
mToLeft=cw/2;
mToTop=pr.top-cTop;
liToLeft=cw/2;
liToTop=st.top-cTop;
}else{
cw=st.left-pr.left-st.h;
cuLeft=st.left-wLeft-cw;
ch=st.top-pr.top;
cuTop=pr.top-wTop+activeH;
mToLeft=pr.left-cLeft;
mToTop=pr.top-cTop;
liToLeft=st.left-cLeft;
liToTop=st.top-cTop;
}
c.style.position='absolute';
c.style.top=cuTop+"px";
c.style.left=cuLeft+"px";
c.width=cw;
c.height=ch;
c.id=arr[a].id;
let cx=c.getContext("2d");
cx.strokeStyle="red";
cx.moveTo(mToLeft,mToTop);
cx.lineTo(liToLeft,liToTop);
cx.stroke();
$(c).appendTo(tbody);
}
});
</script>
</head>
<body>
<div class="tab">
<table width="100%" cellpadding="0" cellspacing="0" >
<thead>
<tr></tr>
</thead>
<tbody id="tbody"></tbody>
</table>
</div>
</body>
</html>
