Javascript表格单元格鼠标悬停()

Question

我有一个表mytable1，它包含3行和td元素。当我有6行时，下面的代码运行良好。但当我有三排的时候，它就不起作用了。任何指导都会有所帮助。

注意：使用以下代码时，当用户将鼠标悬停在表格图像上时，光标会发生变化。

我的代码

$(document).ready(function() {
$("#mytable1 tr:has(td)").mouseover(function(e) {
$(this).css("cursor", "pointer");
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable1" table-layout="fixed" width="100%" style="margin-top: 0px; float:top;"> 
<tr>
<td><span>Design Code : A0001</span></td>
<td><span>Design Code : A0002</span></td>
</tr>
<tr>
<td><a><img src="Images/Img1.jpg"></a></td>
<td><a><img src="Images/Img2.jpg"></a></td>
</tr>
<tr>
<td><span>Colour : Wite</span></td>
<td><span>Colour : Red</span></td>
</tr>
</table>

Answer 1

您的代码可以很好地满足您的需求。运行下面的代码段。

6行示例：

$(document).ready(function() {
$("#mytable1 tr:has(td)").mouseover(function(e) {
$(this).css("cursor", "pointer");
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable1" table-layout="fixed" width="100%" style="margin-top: 0px; float:top;"> 
<tr>
<td><span>Design Code : A0001</span></td>
<td><span>Design Code : A0002</span></td>
</tr>
<tr>
<td><a><img src="Images/Img1.jpg"></a></td>
<td><a><img src="Images/Img2.jpg"></a></td>
</tr>
<tr>
<td><span>Colour : White</span></td>
<td><span>Colour : Red</span></td>
</tr>
<tr>
<td><span>Design Code : A0001</span></td>
<td><span>Design Code : A0002</span></td>
</tr>
<tr>
<td><a><img src="Images/Img1.jpg"></a></td>
<td><a><img src="Images/Img2.jpg"></a></td>
</tr>
<tr>
<td><span>Colour : White</span></td>
<td><span>Colour : Red</span></td>
</tr>
</table>

3行示例

$(document).ready(function() {
$("#mytable1 tr:has(td)").mouseover(function(e) {
$(this).css("cursor", "pointer");
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable1" table-layout="fixed" width="100%" style="margin-top: 0px; float:top;"> 
<tr>
<td><span>Design Code : A0001</span></td>
<td><span>Design Code : A0002</span></td>
</tr>
<tr>
<td><a><img src="Images/Img1.jpg"></a></td>
<td><a><img src="Images/Img2.jpg"></a></td>
</tr>
<tr>
<td><span>Colour : Wite</span></td>
<td><span>Colour : Red</span></td>
</tr>
</table>