Question

我是Jquery的新手。我的网页上有一个表格，它显示了数据库中用户表的内容。我还为每行数据创建了一个编辑按钮和删除按钮。我需要每个编辑和删除按钮的id来编写代码进行编辑并删除数据库中的记录以及在网页表格中实现此更改。

   $query = mysqli_query($con,"SELECT * FROM user_details");
      while($row = mysqli_fetch_array($query))
      {
          echo "<tr>";
          echo "<td>".$row['fname']."</td>";
          echo "<td>".$row['mname']."</td>";
          echo "<td>".$row['childname']."</td>";
          echo "<td><input type='button' id = 'edit".$row['Id']."' value='Edit'></td>";
          echo "<td><input type='button' id = 'delete".$row['Id']."' value='Delete'></td>";
          echo "</tr>";
      }

如果我正在使用Jquery，如何获取每个按钮的ID？或者如果我使用javascript为每个按钮编写onclick事件并将ID作为参数传递，我可以通过Jquery访问。请帮助我

Answer 1

$("button").each(function(index, item) {
    var itemId = $(item).attr('id');
});

但我会将$ row [＆＃39; id＆＃39;]设置为data-id属性，然后使用：

$("button").each(function(index, item) {
    var itemId = $(item).data('id');
});

Answer 2

添加公共类名并将其用作选择器以获取按钮的ID，如下所示

试试这个

$(document).on('click','.edit_btn',function(){
  alert($(this).attr('id'));
});
$(document).on('click','.del_btn',function(){
  alert($(this).attr('id'));
});

HTML

<input type='button' id ='edit' class="edit_btn" value='Edit'>
<input type='button' id ='delete' class="del_btn" value='Delete'>

DEMO

Answer 3

使用Attribute starts with selector和事件委派

$(document).on("click" , "[id^='edit']" ,function() {
    console.log(this.id);
});

$(document).on("click" , "[id^='delete']" , function() {
    console.log(this.id);
});

Answer 4

您可以使用data-*属性指定ID并使用公共类来调用点击处理程序

echo "<td><input type='button' id = 'edit".$row['Id']."' data-id='".$row['Id']."' value='Edit' class='edit-record'></td>";

然后在jQuery中

jQuery(function ($) {
    $(document).on('click', '.edit-record', function () {
        //this is called when the edit button is clicked
        var $this = $(this),
            id = $this.data('id');
        //now id has the value of current record's id
    })
})

Answer 5

首先，您需要使用htmlspecialchars()在HTML上下文中转义变量。其次，您可以使用数据属性轻松识别需要编辑或删除的记录。

?>
<tr>
    <td><?= htmlspecialchars($row['fname'], ENT_QUOTES, 'UTF-8') ?></td>
    <td><?= htmlspecialchars($row['mname'], ENT_QUOTES, 'UTF-8') ?></td>
    <td><?= htmlspecialchars($row['childname'], ENT_QUOTES, 'UTF-8') ?></td>
    <td><input type="button" class="edit" data-id="<?= $row['Id'] ?>" value="Edit"></td>
    <td><input type="button" class="delete" data-id="<?= $row['Id'] ?>" value="Delete"></td>
</tr>
<?php

然后，您可以使用类来识别按钮：

$('.edit').on('click', function() {
    var id = $(this).data('id');
    // edit stuff
});

$('.delete').on('click', function() {
    var id = $(this).data('id');
    // delete stuff
});

获取具有动态ID值的元素的ID

5 个答案: