Javascript 更新多个条目表的特定行

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

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

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

您必须使用不同的查询选择器。为要选择的元素指定一个类名或属性（例如
name
用于
.name
查询），然后
querySelectorAll
方法将返回与查询匹配的元素数组。
您必须使用不同的查询选择器。为要选择的元素指定一个类名或属性（例如使用
.name
进行查询的
name
）然后
querySelectorAll
方法将返回一个匹配查询的元素数组。
我看到的主要问题是，您使用
php
在
javascript
函数内创建了不必要的
foreach
循环

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

我把td包在tr里，因为我假设你把数据放在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>


var saveBtn=document.queryselectoral（“.save”）；
对于（变量i=0；i

我不能100%确定我的js是否不会抛出错误，但它应该告诉您应该将
服务器端
与
客户端
逻辑分开。
我看到的主要问题是，您使用
php
在
javascript
函数中创建了不必要的
foreach
循环

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

我把td包在tr里，因为我假设你把数据放在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>


var saveBtn=document.queryselectoral（“.save”）；
对于（变量i=0；i

我不能100%确定我的js是否不会抛出错误，但它应该指示您应该将
服务器端
与
客户端
逻辑分开。
这可能是重复的，因为当您执行
this.document.querySelector（“#first_name”）时，
您总是会得到名字。您应该在函数的参数中查找/保存您得到的名字。这是因为您使用的是id。id是唯一的，因此您只能在文档中使用它们一次。您应该使用class属性来实现这一点。尝试使用class而不是id的
。first name
。last name
@AndrejsGub我编辑了代码，添加了类，还添加了querySelector。但是，我只得到了第一行结果，这可能是重复的，因为当您执行
this.document.querySelector（“#first_name”）时，
您总是会得到名字。您应该在函数的参数中查找/保存您得到的名字。这是因为您使用的是id。id是唯一的，因此您只能在文档中使用它们一次。您应该使用class属性来实现这一点。尝试使用class而不是id的
。first name
。last name
@AndrejsGub我编辑了代码，添加了类，还添加了querySelectorAl。但是，我只得到了第一行结果。我编辑了代码。但是，对于类和querySelectorAll，我只得到了第一个结果。您专门使用了第一个结果：
console.log（fname[0]）
如果需要它们，请使用
for…in
循环或类似的东西。我编辑了我的代码。但是，对于类和querySelectorAll，我只得到第一个结果。您专门使用了第一个结果：
console.log（fname[0]）；
如果需要它们，请使用
for…in
循环或类似的东西