Javascript Table Cell mouseover

问题描述

我有一个表mytable1，其中包含3行和td元素。当我有6行时，以下代码可以正常工作。但是，当我有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>

解决方法

您的代码可以正常运行。运行下面的代码片段。

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>