Question

我一直在尝试创建一个包含学校项目用户列表的表格。我正在用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;
}

}

Answer 1

问题是因为当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。

Answer 2

返回时您正在按钮中使用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（）

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

jQuery从表的第二行选择数据ID

2 个答案: