Как выбрать конкретную строку из одного и того же имени класса таблицы, используя jQuery

Question

У меня есть таблица данных Campaign на моей веб-странице Laravel.Я хочу изменить статус любого campaign, нажав кнопку из столбца action, используя AJAX.

изображение таблицы данных кампании

Я хочу, чтобы при нажатии кнопки inactive в столбце action кампанию status нужно было изменить на active с inactive мгновенно, и только эта строка будет изменена, и никакая другая строка не будет затронута.Вот почему я использую AJAX.

Но в моем случае, когда я нажимал эту кнопку inactive, все остальные состояния удалялись, и показывалось только одно состояние, как на изображении ниже.

изображение после нажатия кнопки действия

Но я хочу изменить только статус этой конкретной строки.

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-скрипт

$( ".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);
     }
  });

});

Как я могу это сделать?Кто-нибудь, помогите, пожалуйста?Заранее спасибо

Answer 1

Несколько ближе к вашей потребности

$(".action").on("click", function() {

  if ($(this).closest('td').prev().text() == "Active") {
    $(this).closest('td').prev().text("Inctive")
  } else {
    $(this).closest('td').prev().text("Active")
  }
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<table class="table table-hover">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
      <td>Status</td>
      <td class="action">Action</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
      <td>Inactive</td>
      <td class="action"><i class="fa fa-edit"></i></td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@example.com</td>
      <td>Inactive</td>
      <td class="action"><i class="fa fa-edit"></i></td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>july@example.com</td>
      <td>Inactive</td>
      <td class="action"><i class="fa fa-edit"></i></td>
    </tr>
  </tbody>
</table>

Answer 2

У вас не может быть одинакового идентификатора для td, так как у вас есть несколько строк

Надеюсь, это поможет вам

<td id="status_td{{$campaign->id}}">

$( ".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'+id+' span').remove();
            trHTML = '<span class="status label label-danger">Inactive</span>';
            $('#status_td'+id).append(trHTML);
        }
    });
});

Answer 3

$('#status_td span') - общий селектор без ссылки на нажатую кнопку.Вам необходимо определить ссылку на нажатую кнопку.Например, я нахожу targetTD в качестве предыдущего TD, который является родителем нажатой кнопки, и выполняю другие операции с 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: работа с идентификатором (#status_td) неверназдесь, поскольку у вас есть несколько строк с одинаковым идентификатором.

Редактировать: если между этими двумя значениями имеется больше TD, вы можете установить specialClass на целевом TD и найтиэто так

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