javascript - How to select a specific row from some same class name of a table using jQuery

Question

I have a Campaign data table in my Laravel webpage. I want to change the status of any campaign by clicking button from action column using AJAX.

campaign data table image

I want while I clicked inactive button in action column that campaign status should be changed into active from inactive instantly and only that row will be changed and no other row will be affected. That's why I am using AJAX.

But in my case while I clicked that inactive button all other status removed and only one status show like below image.

image after clicking action button

But I want to only change status of that specific row.

datatable html

 <td id="status_td">
        @if($campaign->status == 'active' && $campaign->finalized == 0)
          <span class="status label label-success">{{trans('misc.active')}}</span>
        @elseif($campaign->status == 'pending' && $campaign->finalized == 0)
          <span class="status label label-warning">{{trans('admin.pending')}}</span>
        @elseif($campaign->status == 'inactive' && $campaign->finalized == 0)
           <span class="status label label-danger">Inactive</span>
        @else
           <span class="status label label-default">{{trans('misc.finalized')}}</span>
        @endif
  </td>
  <td> 
      <a href="{{ url('panel/admin/campaigns/edit', $campaign->id) }}" class="btn btn-success btn-xs padding-btn">
           <i class="fa fa-edit"></i>
      </a>
      @if($campaign->status == 'active' && $campaign->finalized == 0)
         <button id="" class="status_change_inactive label label-danger" value="{{ $campaign->id }}">Inactive</button>
      @elseif($campaign->status == 'inactive' && $campaign->finalized == 0)
         <button id="" class="status_change_active label label-success" value="{{ $campaign->id }}">Active</button>
      @endif
  </td>

AJAX script

$( ".status_change_inactive" ).click(function() {
  var id = $(this).val();
  $.ajax({
      type:'GET',
      url:"{{ url('ajax/status_change_inactive') }}",
      data:{campaign_id : id},
      success:function(data) {

        $('#status_td span').remove();

        trHTML = '<span class="status label label-danger">Inactive</span>';

        $('#status_td').append(trHTML);
     }
  });

});

How can I do that ? Anybody Help Please ? Thanks in advance

标签： javascriptjqueryhtmllaravel

Answer 1

$('#status_td span') is a general selector with no reference to the clicked button. You need to define a refrence to the clicked button. For example I find targetTD as previous TD which is parent of clicked button and do other stuffs to targetTD

$( ".status_change_inactive" ).click(function() {
  var id = $(this).val();
  //This line is what you need:
  var targetTD= $(this).parent().prev("td");

  $.ajax({
      type:'GET',
      url:"{{ url('ajax/status_change_inactive') }}",
      data:{campaign_id : id},
      success:function(data) {

        targetTD.find("span").remove();

        trHTML = '<span class="status label label-danger">Inactive</span>';

        targetTD.append(trHTML);
     }
  });

});

FootNote: working with ID (#status_td) is wrong here as you have multiple rows with same ID.

Edit: if there are more TD between those two, you can set a specialClass on the target TD and find it like this

var targetTD= $(this).closest('tr').find('.specialClass')