Обновить конкретную строку таблицы из нескольких записей

Question

У меня есть таблица клиентов.У каждого клиента есть имя и фамилия.Два текстовых поля таблицы доступны для редактирования.Таким образом, пользователи могут обновить информацию, когда они нажимают Сохранить.Проблема в том, что я не могу получить конкретную информацию о строке, я получаю только результаты первой строки

Я пытался сопоставить имена с полем ввода, но у меня ничего не получилось.

<?php foreach($customer as $each){ ?>
    <td class="first_name" id="first" contenteditable="true"><?php echo 
    $each['first_name']; ?></td>
    <td class="last_name" id="last"  contenteditable="true"><?php echo 
    $each['last_name']; ?></td>
    <td >   <button type="button" onclick="save('<?php echo $each['first_name'];? 
    >','<?php echo $each['last_name'];?>');" >Save</button></td>
    <? } ?>

<script type="text/javascript">
    function save(first,second) {
      <?php foreach($customer as $each){?>
        var first_name = "<?php echo $each['first_name']?>";
        var last_name = "<?php echo $each['last_name']?>";
        if (first_name==first && last_name == second){
          var fname = document.querySelectorAll(".first_name");
          console.log(fname[0]);
        }
        <?php } ?>

      }
 </script>

Answer 1

Основная проблема, которую я вижу, заключается в том, что вы создаете ненужный цикл foreach внутри функции javascript, используя php.

Вы можете динамически создавать свою таблицу и содержимое внутри нее, это нормально.Но javascript не заботится об этом, и вы не должны создавать javascript с помощью php.Так что я бы сделал это так.

Я обертываю td в tr, потому что я предполагаю, что вы помещаете эти данные в tr.

<?php foreach($customer as $each){ ?>
  <tr class="customer-row">
    <td class="first_name" contenteditable="true"><?php echo 
    $each['first_name']; ?></td>
    <td class="last_name" contenteditable="true"><?php echo 
    $each['last_name']; ?></td>
    <td><button type="button" class="save">Save</button></td>
  </tr>
<? } ?>

Затем вне цикла php foreach я создаю свой скрипт.

<script type="text/javascript">
var saveBtn = document.querySelectorAll(".save");

for(var i = 0; i < saveBtn.length; i++) {
  // attach click event to every button.
  saveBtn[i].addEventListener("click", function() {
    var _this = this;
    var _tr = _this.closest(".customer-row");
    var fname = _tr.querySelector(".first_name").innerText;
    var lname = _tr.querySelector(".last_name").innerText;
    console.log("Name: ", fname + " " + lname");
    // below you can implement your check name logic...
  }
}
</script>

Я не на 100% уверен, что мои js не будут выдавать ошибки, но это должно дать вам указание на то, что вы должны отделить свою server-side от client-side логики.

Answer 2

Вы должны будете использовать другой селектор запросов.Присвойте имя класса или атрибут элементам, которые вы хотите выбрать (например, name для запроса с помощью .name), а затем метод querySelectorAll вернет массив элементов, соответствующих вашему запросу.