отправить идентификатор (динамически создаваемый в php) из тега href в ajax / jquery?

Question

У меня есть вопрос, я очень плохо знаком с jQuery и Ajax, поэтому я надеюсь, что кто-нибудь сможет мне помочь.

У меня есть несколько кнопок «Изменить» в таблице ((данные 1-го столбца) для данных каждой строки -> (2-е действие столбца), кнопка редактирования), и я создал некоторую встроенную функцию редактированияв jQuery: но когда я нажимаю кнопку редактирования, чтобы показать данные в таблице и редактировать, они все открываются одновременно, я хочу открыть только экземпляр, который сначала редактирует.Я назначил каждый идентификатор кнопки редактирования в элементе динамически.

Я предполагаю, что мне нужно отправить эту кнопку идентификатора Ajax, чтобы она могла продолжаться, но я не знаю, как и что делать?Я надеюсь, что кто-то может объяснить мне.Большое спасибо !!!

Вот мой код:

php

<?php 
                  $teams = Team::getAll();
                  foreach ($teams as $team) {
                    $tname = $team->name;
                    $tid = $team->team_id;
                    echo "<tr><td><a href='#' class='editable' style='margin-left: 2px;'>".$tname."</a><form method='POST' action=''><input type='text' class='editshow form-control col-sm-3 ' aria-label='Sizing example input' aria-describedby='inputGroup-sizing-sm' name='edit_name' value='".$tname."'><button name='btnSave' style='margin-left: 2px; margin-top:3px;' class='btn btn-success btn-sm editshow'>Save</button></form></td>";

                    echo "<td><a href='teams.php?edit_tid=$tid'><button class='btn btn-primary btn-sm btnEdit'".$tid."'>Edit</button></a><a href='teams.php?delete_tid=$tid'><form method='POST' action=''><button name='btnDelete' class='btn btn-danger btn-sm'>Delete</button></form></a></td></tr>";
                  }
                  ?>

jQ

 <script type="text/javascript">
$(".editshow").hide();
$(".btnEdit").click(function(){
  $(".editshow").toggle();
  $(".editable").setTimeout(2000);
});
</script>

Answer 1

Вы очень близки - по сути, вы хотите иметь возможность ссылаться на конкретную кнопку, которая была нажата, а затем перейти к соответствующим полям редактирования.

<script type="text/javascript">
$(".editshow").hide();
$(".btnEdit").click(function(){
  // We'll save a reference to the current button...
  let clickedBtn = $(this),
      containerEl = clickedBtn.closest("tr");
  // now, we can work specifically within this TR el, as that is
  //  the container for our currently editing data.
  containerEl.find(".editshow").toggle();
  containerEl.find(".editable").setTimeout(2000);
});
</script>

Использование jQuery's closest() возвращает менядо ближайшего <tr>, который является контейнером для текущей строки таблицы.Ограничивая выбор значения ТО (используя containerEl.find()), я только переключаю элементы, относящиеся к этой конкретной строке.

Я рекомендую взглянуть на документы jQuery, здесь происходят некоторые сложные вещи.Во-первых, $(this) в обработчике кликов относится к кликаемому элементу.Во-вторых, вы можете посмотреть документы для .closest() и .find().

Не уверен, что должен делать setTimeout(), но это должно помочь вам начать.

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