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

Question

I am trying to use jquery to add a class to the table row element but it only works on the first row. I am populating the table using a mysql database and using a while loop to display the table.

After pressing the button I want each row to change color when hovered over. The class I want applied to the table row element:

.hoverChange:hover
 {

     background-color: #66ccff

 }

The table and while loop which displays all the data:

               <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>";

The button:

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

And finally the jquery I am using:

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

Answer 1

You need to use a class instead of an ID for your table rows. ID's Must Be Unique , specifically because it will cause problems in JavaScript and CSS when you try to interact with those elements.

You have some stray spaces and you're not quoting attributes. This could also become problematic in the future, ie

<tr class="myClass">

Answer 2

You should use class instead of id attribute for repeating objects. ID should be unique for the whole page.

And be careful with spaces in your code ;)