更新多个条目的表的特定行答案

【问题标题】：Update specific row of table of multiple entries更新多个条目的表的特定行
【发布时间】：2019-06-21 09:15:49
【问题描述】：

我有一张客户表。每个客户都有名字和姓氏。表格的两个文本字段是可编辑的。因此，用户可以在按下保存时更新信息。问题是我无法获取具体的行信息，我只能获取第一行结果

我尝试使用输入字段匹配名称，但没有成功。

<?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>

【问题讨论】：

What is the difference between client-side and server-side programming?的可能重复
那是因为当你做this.document.querySelector('#first_name'), 时，你总是得到第一个名字。您应该查找/保存您在函数参数中获得的名称
这是因为您使用了 ID。 ID 是唯一的，因此您只能在文档中使用它们一次。您应该使用类属性来实现这一点。
尝试使用类而不是id的.first-name.last-name
@AndrejsGubars 我编辑了代码并添加了类并添加了 querySelectorAl。不过，我只得到第一行结果

标签： javascript php jquery html-table

【解决方案1】：

您必须使用不同的查询选择器。将类名或属性分配给您要选择的元素（例如，name 用于使用 .name 进行查询）然后 querySelectorAll 方法将返回与您的查询匹配的元素数组。

【讨论】：

我已经编辑了我的代码。尽管如此，使用类和 querySelectorAll，我只得到第一个结果
您专门使用了第一个：console.log(fname[0]); 如果您需要它们都使用for...in 循环或类似的东西

【解决方案2】：

我看到的主要问题是您使用php 在javascript 函数内创建了不必要的foreach 循环。

您可以动态创建您的表格和其中的内容，这很好。但是 javascript 并不关心这一点，你不应该用 php 创建 javascript。所以我会这样做。

我将 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 逻辑分开。

【讨论】：