gpt4 book ai didi

javascript - 在 html 表格中突出显示鼠标悬停时选定的行和列

转载 作者:搜寻专家 更新时间:2023-10-31 22:00:28 25 4
gpt4 key购买 nike

我需要在鼠标悬停时突出显示表格中单元格的行和列。生成的表格是动态的,我正在获取来自数据库的值并显示在 html 表中。该表的结构如下所示,我无法修改现有结构。请建议我现有的 html 代码如何使用 jquery/css 突出显示表格中的选定行和列。请找到 fiddle 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>

最佳答案

突出显示特定的行和列。对于列,我使用了 nth-child() 作为选择器的一部分。希望这会有所帮助。

注意:我将类 .myCell 添加到第二级嵌套表的 tds 中,以便更轻松地为 jquery 选择器名称。

$(document).ready(function() {
$('.myCell').on('mouseover', function() {
$(this).closest('tr').addClass('highlight');
$(this).closest('table').find('.myCell:nth-child(' + ($(this).index() + 1) + ')').addClass('highlight');
});
$('.myCell').on('mouseout', function() {
$(this).closest('tr').removeClass('highlight');
$(this).closest('table').find('.myCell:nth-child(' + ($(this).index() + 1) + ')').removeClass('highlight');
});
});
.highlight {
background-color:lightgray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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" class="myCell">Row1</td>
<td class="myCell">
<table>
<tr>
<td>
Cell1
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell1
</td>
</tr>
</table>
</td>
<td class="myCell">
<table>
<tr>
<td>
Cell1
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell1
</td>
</tr>
</table>
</td>
<td class="myCell">
<table>
<tr>
<td>
Cell1
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell1
</td>
</tr>
</table>
</td>
<td class="myCell">
<table>
<tr>
<td>
Cell1
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell1
</td>
</tr>
</table>
</td>
<td class="myCell">
<table>
<tr>
<td>
Cell1
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell1
</td>
</tr>
</table>
</td>
</tr>

<tr>
<td bgcolor="grey" class="myCell">Row2</td>
<td class="myCell">
<table>
<tr>
<td>
Cell2
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell2
</td>
</tr>
</table>
</td>
<td class="myCell">
<table>
<tr>
<td>
Cell2
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell2
</td>
</tr>
</table>
</td>
<td class="myCell">
<table>
<tr>
<td>
Cell2
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell2
</td>
</tr>
</table>
</td>
<td class="myCell">
<table>
<tr>
<td>
Cell2
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell2
</td>
</tr>
</table>
</td>
<td class="myCell">
<table>
<tr>
<td>
Cell2
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell2
</td>
</tr>
</table>
</td>
</tr>


<tr>
<td bgcolor="grey" class="myCell">Row3</td>
<td class="myCell">
<table>
<tr>
<td>
Cell3
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell3
</td>
</tr>
</table>
</td>
<td class="myCell">
<table>
<tr>
<td>
Cell3
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell3
</td>
</tr>
</table>
</td>
<td class="myCell">
<table>
<tr>
<td>
Cell3
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell3
</td>
</tr>
</table>
</td>
<td class="myCell">
<table>
<tr>
<td>
Cell3
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell3
</td>
</tr>
</table>
</td>
<td class="myCell">
<table>
<tr>
<td>
Cell3
</td>
</tr>
<tr>
<td class='innerCell'>
Inner cell3
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>

关于javascript - 在 html 表格中突出显示鼠标悬停时选定的行和列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28324972/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com