Jquery从表的第二行选择data-id

Posted 2023-01-05

我一直在努力制作一个包含学校项目用户列表的表格。我用jquery，php和mysql做这个。

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

然而，这并没有按预期工作。它只选择同一行的数据。虽然data-id值不同。谁能告诉我为什么会这样？我将保留下面的代码以便清除

JS：

$(document).ready(function () 
   $(document).on('click', '#update-btn', function () 
       var id =$("[id='update-btn']").attr('data-id');
       var username = $('#username').val();
       var dob = $('#dob').val();
       var address = $('#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")

              
          
       );
   );
);

PHP：

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;

答案

问题是因为当id属性在DOM中必须是唯一的时，你的循环导致多个元素具有相同的id。要修复此问题，请在循环内的元素上使用公共类，然后在遍历button时DOM遍历以查找它们。

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;
  

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

    // ajax request here...
  );
);

注意使用data()来检索data属性。另请注意，您可以将data-id属性本身放在tr而不是每个button上稍微干掉HTML。

另一答案

您在按钮中使用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。