Php Jquery从表的第二行选择数据id

我一直在尝试为一个学校项目制作一个包含用户列表的表格。 我用jquery、php和mysql来实现这一点

我正在从mysql数据库中检索所有数据，并将其打印到表中。 现在我正在尝试添加一个更新按钮，我可以轻松地更新每个特定行的数据

然而，这并不像预期的那样有效。它仅从同一行中选择数据。而数据id值则不同。谁能告诉我为什么会这样？我会在下面留下我的代码以供批准

JS:

PHP:

---

}

返回时，您正在按钮中使用ID ID对于屏幕中的每个对象都是唯一的 尝试使用类 大概是这样的：

$(document).ready(function () {
   $(document).on('click', '.update-btn', function () {
       var id =$(this).data('id');
       var username = $(this).closest('tr').find('.username').val();
       var dob = $(this).closest('tr').find('.dob').val();
       var address = $(this).closest('tr').find('.address').val();

       $.ajax({
          url: 'ajax/update.php',
          method: 'POST',
          data: {
              ID: id,
              username: username,
              dob: dob,
              address: address
          },
          success: function (data) {
              if (data){
                  console.log(data);
                  swal({
                      title: 'Update successful',
                      icon: 'success',
                      text: 'User with ID ' + id + ' updated.'
                  });
                  setTimeout(function () {
                      window.location = 'medewerkers.php';
                  }, 5000)

              }
              else if (data === "update_failed"){

              }
          }
       });
   });
});



public static function loadMedewerkers(){
$mysql = Database::DBCon()->prepare('

    SELECT * FROM medewerkers

');
$mysql->execute();

while ($fetch = $mysql->fetch(PDO::FETCH_ASSOC))
{

    $html = '<tr>
                <td><input type="text" value="'. $fetch['username'] .'" class="username"></td>
                <td><input type="text" value="'. $fetch['dob'] .'" class="dob"></td>
                <td><input type="text" value="'. $fetch['address'] .'" class="address"</td>
                <td><button type="button" class="btn btn-danger delete-btn" data-id="'. $fetch['ID'] .'">Delete</button>
                    <button type="button" class="btn btn-warning update-btn" data-id="'. $fetch['ID'] .'">Update</button></td>
             </tr>';
    echo $html;
}
}

删除按钮也是如此

并使用.data而不是attr

---

另外，在获取用户名、dob和地址的其他列中，您必须使用class而不是id。

问题是因为循环导致多个元素具有相同的id，而id属性在DOM中必须是唯一的。要解决这个问题，请在循环中的元素上使用公共类，然后在单击按钮时通过DOM遍历找到它们

公共静态函数加载程序 { $mysql=Database:：DBCon->prepare'SELECT*FROM medewerkers'； $mysql->execute； 而$fetch=$mysql->fetchPDO:：fetch_ASSOC { $html='1

---

这仍然使用id属性…？数据id对您的jquery来说很好，按钮标签的attr id不好我不知道这是什么意思，但我的评论是指$'username'.val等。

public static function loadMedewerkers(){
$mysql = Database::DBCon()->prepare('

    SELECT * FROM medewerkers

');
$mysql->execute();

while ($fetch = $mysql->fetch(PDO::FETCH_ASSOC))
{

    $html = '<tr>
                <td><input type="text" value="'. $fetch['username'] .'" id="username"></td>
                <td><input type="text" value="'. $fetch['dob'] .'" id="dob"></td>
                <td><input type="text" value="'. $fetch['address'] .'" id="address"</td>
                <td><button type="button" class="btn btn-danger" id="delete-btn" data-id="'. $fetch['ID'] .'">Delete</button>
                    <button type="button" class="btn btn-warning" id="update-btn" data-id="'. $fetch['ID'] .'">Update</button></td>
             </tr>';
    echo $html;
}

$(document).ready(function () {
   $(document).on('click', '.update-btn', function () {
       var id =$(this).data('id');
       var username = $(this).closest('tr').find('.username').val();
       var dob = $(this).closest('tr').find('.dob').val();
       var address = $(this).closest('tr').find('.address').val();

       $.ajax({
          url: 'ajax/update.php',
          method: 'POST',
          data: {
              ID: id,
              username: username,
              dob: dob,
              address: address
          },
          success: function (data) {
              if (data){
                  console.log(data);
                  swal({
                      title: 'Update successful',
                      icon: 'success',
                      text: 'User with ID ' + id + ' updated.'
                  });
                  setTimeout(function () {
                      window.location = 'medewerkers.php';
                  }, 5000)

              }
              else if (data === "update_failed"){

              }
          }
       });
   });
});



public static function loadMedewerkers(){
$mysql = Database::DBCon()->prepare('

    SELECT * FROM medewerkers

');
$mysql->execute();

while ($fetch = $mysql->fetch(PDO::FETCH_ASSOC))
{

    $html = '<tr>
                <td><input type="text" value="'. $fetch['username'] .'" class="username"></td>
                <td><input type="text" value="'. $fetch['dob'] .'" class="dob"></td>
                <td><input type="text" value="'. $fetch['address'] .'" class="address"</td>
                <td><button type="button" class="btn btn-danger delete-btn" data-id="'. $fetch['ID'] .'">Delete</button>
                    <button type="button" class="btn btn-warning update-btn" data-id="'. $fetch['ID'] .'">Update</button></td>
             </tr>';
    echo $html;
}
}