Change style of a single element in a loop

0
votes

This might confuse but a serious question.

I'm getting table rows from a loop using php and I'm displaying those table inside a table tag using ajax.

Here for the each row there is an id called productTableRow.

So I want to do is, in this table when I click a specific row, I want to change that clicked row's background color.Just only that row and to take the value of the clicked row attribute called product-id and show it in another hidden input

$(document).on('click', function(e){
      if($(e.target).is('#productTableRow')){
        var productId = $(e.target).attr('productId');
        if(productId == productId){
          $(e.target).css('background-color','#128C7E');
        } else {
          $('.trProductTable').css('background-color', 'transparent');
        }
      }

});

This is my php code which generating the Table rows,

     foreach ($products as $product) {
                $responseData .= "<tr id='productTableRow' productId='" . $product->id . "'>";
                $responseData .= "<td>" . $product->id . "</td>";
                $responseData .= "<td>" . $product->product_name . "</td>";
                $responseData .= "<td>" . $product->product_barcode . "</td>";
                if ($product->group_id == 0) {
                    $responseData .= "<td>None</td>";
                } else {
                    $responseData .= "<td>" . $product->group_name . "</td>";
                }
                $responseData .= "<td>" . $product->product_cost . "</td>";
                $responseData .= "<td>" . $product->product_selling . "</td>";
                if ($product->product_type == 0) {
                    $responseData .= "<td>Liquid</td>";
                } else if ($product->product_type == 1) {
                    $responseData .= "<td>Weight</td>";
                } else if ($product->product_type == 2) {
                    $responseData .= "<td>Quantity</td>";
                }
                $responseData .= "<td>" . $product->created_at . "</td>";

Tried this code but doesn't work, really appreciate your help.

2
javascriptphpjqueryajaxlaravel
please add HTML to the post too. – sid
@sid added the html code – Mishen Thakshana
Having multiple html elements with the same id in the same document produces unexpected behaviors, use a class instead – Kevin Guanche Darias
@KevinGuancheDarias how to make a click event if we use a class? and to the specific table row? – Mishen Thakshana

2 Answers

0
votes

First of all, id has to be specific to one element. Jquery is configured as this. Then you can use $(this).parent(‘tr’) To get the parent row in the click event that can be to the entire class.

0
votes

After changing the id to a class, I would try this

$('tr.productTableRow').click(function(){
        var productId = $(this).attr('productId');
        if(productId === productId){ // Always true
          $(this).css('background-color','#128C7E');
        } else {
          // Do something when false ???
        }
});

Edit Note: this code must be run after the table is added to the html, if you need to run it before, put the code inside a $(document).ready(function(){/*code */ });