Javascript HTML表格，可展开、调整第一行大小、悬停并高亮显示所选内容

首先，我想向所有分享他们知识的人和那些仍然很好的人表示我诚挚的感谢，对于那些问了甚至愚蠢问题的用户表示尊敬

目标：我的目标是实现表中的以下目标：

• 展开行（但图像位于第一列的左侧） “向右箭头”或“向下箭头”）

迄今为止取得的成绩：

我想要实现的目标：

• 调整第一列的大小。-成功
• 悬停并高亮显示选定行

迄今为止取得的成绩：单击时，仅突出显示倒数第二行。 我想要实现的目标：单击时必须突出显示整行

代码：

CodePen-具有固定页眉、页脚和左列的表，使用位置：sticky
html{
字体系列：SegoeUI；
框大小：边框框；
}
*,
*：之前，
*：之后{
框大小：继承；
}
.介绍{
最大宽度：1580px；
保证金：1em自动；
}
.表格卷轴{
位置：相对位置；
宽度：100%；
z指数：1；
}
.表格滚动表格{
宽度：3500px；
最小宽度：1580px；
保证金：自动；
边界塌陷：分离；
边界间距：0；
}
.桌套{
位置：相对位置；
}
.表格滚动td{
填充：7px；
垂直对齐：顶部；
}
.表格滚动条THAD td{
背景#4CAF50；
颜色：#fff；
职位：-网络工具包粘性；
位置：粘性；
排名：0；
}
/*safari和ios需要将tfoot本身定位为：粘性*/
.table scroll tfoot，
.表格滚动tfoot th，
.表格滚动tfoot td{
职位：-网络工具包粘性；
位置：粘性；
边框：1px实心#ddd；
底部：0；
背景:#666；
颜色：#fff；
z指数：4；
}
td：第一个孩子{
职位：-网络工具包粘性；
位置：粘性；
左：0；
z指数：2；
背景：#fff；
}
运输署{
填充：8px；
文本对齐：左对齐；
边框底部：1px实心#ddd；
}
thead td：第一个孩子，
tfoot td：第一个孩子{
z指数：5；
}
#主表tr：悬停{
背景色：#F5；
}
#主表：not（thead）tr:hover td:first child{
背景色：#F5；
}
#主表。隐藏的_行{
显示：无；
}
window.console=window.console | |函数（t）{}；
if（document.location.search.match（/type=embed/gi））{
window.parent.postMessage（“resize”、“*”）；
}
函数showHideRow（行）{
$（“#”+行）.toggle（）；
}
$（函数（）{
var thHeight=$（“表#主表td:first”）.height（）；
$（“表#主表td:first”）。可调整大小({
手柄：“e”，
minHeight:thHeight，
maxHeight:thHeight，
最小宽度：350，
调整大小：函数（事件、ui）{
var sizerID=“#”+$（event.target.attr（“id”）+“-sizer”；
$（sizerID）.width（ui.size.width）；
} });
});
//#sourceURL=pen.js
普里尔变种；
原色变种；
原色变种；
功能HighLightTR（el、背景色、文本色）{
if（typeof（preEl）！=“未定义”）{
preEl.bgColor=orgBColor；
试试{ChangeTextColor（preEl，orgTColor）；}catch（e）{；}
}
orgBColor=el.bgColor；
orgTColor=el.style.color；
el.bgColor=背景色；
试试{ChangeTextColor（el，textColor）；}catch（e）{；}
preEl=el；
}
函数ChangeTextColor（a_obj，a_color）{；
对于（i=0；i
第一排
第一排
第一排
第一排
第一排
第一排
第一排
第一排
第一排
第一排
第一排
第一排
第一排
第一排
第一排
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
左列
第二排
第二排
第二排
第二排
第二排
第二排
第二排
第二排
第二排
第二排
第二排
第二排
第二排
第二排
第二排
第二排
第二排
可以展开的第二行
第三排
第三排
第三排
第三排
第三排
第三排
第三排
第三排
第三排
第三排
第三排
第三排
第三排
第三排
第三排
第三排
第三排
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
隐藏的
左列
第四
第四
第四
第四
第四
第四
第四
第四
第四
第四
第四
第四
第四
第四
第四
第四

您已经定义了

td:first child

的

背景色，因此需要添加另一个影响表的第一个元素的CSS规则。用于排除表的标题

#main-table :not(thead) tr:hover td:first-child  {
  background-color:#f5f5f5;
}

谢谢@ozika:）我已经更新了我的帖子。任何人都可以帮我添加展开/折叠中的右箭头或下箭头图像。谢谢：）