Question 69640 in Ajax Question posted in
You can find the official documentation here.

Change style of a single element in a loop – Jquery ajax

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.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I arrived at my own answer,

    $(document).on('click', '.groups-product-sidebar', (e)=>{
  //Getting the clicked group attributes
  var groupId = $(e.target).attr('groupId');
  $('.groups-product-sidebar').parent().css('background-color','transparent');
  $(e.target).parent().css('background-color','#128C7E');

});

  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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 */ });

    Edit: Answer based on the comments

    $(document).on('click', '.productTableRow', function(){ 
    if(oldObject) {
      $(oldObject).css('background-color', 'transparent');
    }
    var productId = $(this).attr('productId'); 
    if(productId === productId){ // Always true 
      $(this).css('background-color','#128C7E'); 
    }
    oldObject = this;

});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search