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

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

@JayBlanchard oh right, totally oversaw that. Anyways your answer explained whats wrong here — empiric, Dec 05 '16 at 17:46
If an answer solved your problem, consider accepting the answer. Here's how http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work then return here and do the same with the tick/checkmark till it turns green. This informs the community, a solution was found. Otherwise, others may think the question is still open and may want to post (more) answers. You'll earn points and others will be encouraged to help you. *Welcome to Stack!* — Jay Blanchard, Dec 05 '16 at 17:52

score 4 · Accepted Answer · edited May 23 '17 at 12:30

4

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

edited May 23 '17 at 12:30

Community

1
1

answered Dec 05 '16 at 17:44

Jay Blanchard

34,243
16
77
119

score 0 · Answer 2 · answered Dec 05 '16 at 17:45

0

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

answered Dec 05 '16 at 17:45

Kirill Shumilov

307
1
7

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

2 Answers2