CODEWITHSUNDEEP
javascriptphpjqueryhtml
lp-pixel
lp-pixel

Reputation: 103

Jquery to add class to table row only applies to first row

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');
});
 });

Upvotes: 1

Views: 356

Answers (2)

Kirill Shumilov
Kirill Shumilov

Reputation: 307

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

Upvotes: 0

Jay Blanchard
Jay Blanchard

Reputation: 34426

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, i.e.

<tr class="myClass">

Upvotes: 4

Related Questions