【发布时间】：2015-02-04 15:23:08
【问题描述】：
我需要在鼠标悬停时突出显示表格中单元格的行和列。生成的表格是动态的，我得到了 来自数据库的值并显示在 html 表中。表的结构如下图所示，我无法修改现有结构。 请用我现有的 html 代码建议我如何使用 jquery/css 突出显示表中选定的行和列。 请找到小提琴http://jsfiddle.net/0w9yo8x6/78/。
下面是html代码：
<div>
<table border="1px">
<tr>
<td>
<table style="width:100%">
<tr title="Table Header">
<td>
Title
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1px">
<tr>
<td></td>
<td bgcolor="grey">Header1</td>
<td bgcolor="grey">Header2</td>
<td bgcolor="grey">Header3</td>
<td bgcolor="grey">Header4</td>
<td bgcolor="grey">Header5</td>
</tr>
<tr>
<td bgcolor="grey">Row1</td>
<td>
<table>
<tr>
<td>
Cell1
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell1
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell1
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell1
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell1
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell1
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell1
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell1
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell1
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell1
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="grey">Row2</td>
<td>
<table>
<tr>
<td>
Cell2
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell2
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell2
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell2
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell2
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell2
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell2
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell2
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell2
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell2
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="grey">Row3</td>
<td>
<table>
<tr>
<td>
Cell3
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell3
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell3
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell3
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell3
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell3
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell3
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell3
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
Cell3
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell3
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
【问题讨论】：
-
tr:hover { background-color: ...; }，也许？ -
我想在鼠标悬停时用某种颜色突出显示选定的行和列。 @比芬
-
你能给我们一个你想要达到的目标的视觉表示，也许是一张图片。
-
如果您想突出显示整行和整列，请看这里：css-tricks.com/row-and-column-highlighting
-
@ValentinS。是的，这是一个很好的演示，css-tricks.com/row-and-column-highlighting
标签： javascript jquery html css