Question

我正在尝试使用jquery向表行元素添加一个类，但它只适用于第一行。我使用mysql数据库填充表，并使用 while 循环来显示表。

按下按钮后，我想让每一行在悬停时改变颜色。我想要的类应用于表行元素：

.hoverChange:hover
 {

     background-color: #66ccff

 }

显示所有数据的表和while循环：

               <table border = 1> 
                <tr>
                <th>  ID  </th>
                <th>  Name  </th>
                <th>  Description  </th>
                <th>  Type  </th>
                <th>  Price  </th>
                <th>  Cost Price  </th>
                <th>  Stock Level </th>
                <th>  EAN  </th>
                </tr> 

                 <?php

                 while ($product_Info = mysqli_fetch_array($result,MYSQLI_ASSOC)) {


                         ?>

                        <tr id = tableRows>

                         <?php
                         echo "<td>" . $product_Info["product_ID"] . "</td>";
                         echo "<td>" . $product_Info["product_Name"] . "</td>";
                         echo "<td>" . $product_Info["product_Desc"] . "</td>";
                         echo "<td>" . $product_Info["product_Type"] . "</td>";
                         echo "<td>" . $product_Info["product_Price"] . "</td>";
                         echo "<td>" . $product_Info["product_Cost"] . "</td>";
                         echo "<td>" . $product_Info["product_Stock"] . "</td>";
                         echo "<td>" . $product_Info["product_ean"] . "</td>">                          


                         echo "<tr>";

                 }

                echo "</table>";

按钮：

<button type="button" id = "updateBtn" class="btn btn-info">Update</button>

最后我正在使用的jquery：

$(document).ready(function(){
$("#updateBtn").click(function(){
    $('#tableRows').addClass('hoverChange');
});
 });

Answer 1

您需要为表行使用类而不是ID。 ID's Must Be Unique，特别是因为当您尝试与这些元素进行交互时，它会在JavaScript和CSS中导致问题。

你有一些迷路的空间而且你没有引用属性。这在未来也可能成为问题，即

<tr class="myClass">

Answer 2

您应该使用class而不是id属性来重复对象。 ID应该对整个页面都是唯一的。

请注意代码中的空格;）

向表行添加类的Jquery仅适用于第一行

2 个答案: