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

我一直在尝试制作一个包含学校项目用户列表的表格.
我正在用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.要解决此问题,请在循环中的元素上使用通用类,然后在单击按钮时进行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-id属性本身放在tr上,而不是将每个按钮放在DRY上以稍微干燥HTML.

原文链接：https://www.f2er.com/jquery/530867.html

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

猜你在找的jQuery相关文章