Javascript 如何使用文本创建td边框

我想创建一个带有默认边框的simply表，然后在

td

元素上获取“hover”事件（可能是jquery），这将导致：

a） 顶部边框应为黑色，中间空白

b）边框的中间应显示“<代码> p>代码>元素，源于代码< TD < /代码>（文本应位于悬停与前一个元素之间）

结果应该如下所示（我用不同的颜色标记悬停的元素）：

我不确定，但可能仅仅通过使用css是不可能做到这一点的，我试图实现一个简单的示例，但它不起作用。其想法是创建两个div（模仿上边框）和

p

元素。问题是因为div总是不可见的（当元素悬停时应该替换正常的

td

边框），我也不知道如何根据需要定位

p

元素

我怎样才能得到正确的解决方案

$（文档）.ready（函数（）{
var tableBodyContent=“”；
对于（变量i=0；i<10；i++）{
tableBodyContent+=“”+
“
ok
项目“+i+”+
“
ok
项目“+i+”+
“
ok
项目“+i+”+
“
ok
项目“+i+”+
“
ok
项目“+i+”+
''
}
$（“#timeTableBody”）.append（tableBodyContent）；
});
$（“td”）。悬停(
函数（）{
$（this）.find（“.myBorder”）.each（函数（索引）{
$（this.show（）；
});
},
函数（）{
$（this）.find（“.myBorder”）.each（函数（索引）{
$（this.hide（）；
});
}
);
表格{
边界：无；
边界塌陷：塌陷；
填充：0；
保证金：0；
}
th，
运输署{
宽度：45px；
高度：20px；
填充：10px；
}
.myTopBorder{
高度：1px；
宽度：100%；
}
.leftBorder，
.右边界{
身高：100%；
宽度：30%；
显示：无；
}
.左边框{
浮动：左；
}
.右边界{
浮动：对；
}
th{
边框：1px纯黑；
}
运输署{
边框顶部：1px纯色浅灰色；
左边框：1px实心浅灰色；
右边框：1px实心浅灰色；
}
td:悬停{
边界：无；
}
.myText{
显示：无；
}

周一
星期二
结婚
清华大学
星期五
您可以对以下内容使用伪元素和数据属性：


表格{
边界：无；
边界塌陷：塌陷；
填充：0；
保证金：0；
}
th，
运输署{
宽度：45px；
高度：20px；
填充：10px；
}
th{
边框：1px纯黑；
}
运输署{
边框顶部：1px纯色浅灰色；
左边框：1px实心浅灰色；
右边框：1px实心浅灰色；
位置：相对位置；
}
td：：之前{
内容：attr（数据文本）；
位置：绝对位置；
z指数：2；
顶部：-5px；
字体大小：10px；
左：0；
右：0；
文本对齐：居中；
背景：线性渐变（绿色，绿色）中左/20px 1px，线性渐变（绿色，绿色）中右/20px 1px；
背景重复：无重复；
不透明度：0；
}
td:悬停{
边界顶部：0；
背景：橙色；
}
td:hover:：before{
不透明度：1；
}

周一
星期二
结婚
清华大学
星期五
项目0
项目0
项目0
项目0
项目0
项目0
项目0
项目0
项目0
项目0
项目0
项目0
项目0
项目0
项目0
您需要的内容可以单独使用CSS来完成。通过将要显示的值悬停在
td
上的
data
属性中，您可以使用
attr（）
轻松地将其读取到psuedo元素的内容中。然后，您可以使用类似的技术在悬停时创建边框的左侧和右侧，如下所示：


$（文档）.ready（函数（）{
var tableBodyContent=''；
对于（变量i=0；i<10；i++）{
var rowArr=（新数组（5））.fill（'p class=“item”>item'+i+'0,5）；
tableBodyContent+=''+行数组连接（''）+''
}
$（“#timeTableBody”）.append（tableBodyContent）；
});
表格{
边界塌陷：塌陷；
填充：0；
保证金：0；
背景色：#EFEF；
}
th，
运输署{
宽度：45px；
高度：20px；
填充：10px；
}
th{
边框：1px纯黑；
边界底部：0；
}
运输署{
边框：1px纯色浅灰色；
边界底部：0；
位置：相对位置；
}
td i：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：16px；
高度：1px；
背景色：#000；
显示：无；
}
运输署一题：之后{
内容：''；
位置：绝对位置；
排名：0；
右：0；
宽度：16px；
高度：1px；
背景色：#000；
显示：无；
}
td：之前{
内容：attr（数据悬停）；
位置：绝对位置；
顶部：-7px；
左：18px；
宽度：30px；
字号：0.8em；
文本对齐：居中；
显示：无；
} 
td:悬停{
边框顶部颜色：透明！重要；
背景色：#DEDEDE；
}
td:悬停p{
显示：无；
}
td:悬停：之前，
td:悬停i:之前，
td:悬停i:之后{
显示：块；
}
t车身tr:n第n个儿童（1）td{
边框顶部颜色：#000；
}

周一
星期二
结婚
清华大学
星期五
您可以这样使用
内容：attr（数据值）
：


完整css和最短解决方案：

$（文档）.ready（函数（）{
对于（设i=0，$tr；i<10；i++）{
$tr=$（“”）
.附于（“#时间表正文”）；
对于（var日=0；日<5；日++）
$("")
.attr（“数据值”，i+“：00”）
.文本（“项目”+i）
.appendTo（$tr）；
}
});
表格{
边界：无；
边界塌陷：塌陷；
填充：0；
保证金：0；
}
th，
运输署{
宽度：45px；
高度：20px；
填充：10px；
}
th{
边框：1px纯黑；
}
运输署{
边框：1px纯色浅灰色；
位置：相对位置；
}
td:hover:：after{
内容：attr（数据值）；
位置：abs