Javascript函数只对表的第一行[重复]起作用

Question

我的表中的每一行都有一个edit按钮，其中有一个javascript函数来编辑一行中的数据。每当我单击edit按钮时，所有行都会受到影响，所有输入字段都被启用。一开始，所有行中的所有输入字段都被禁用，但当我单击任何编辑按钮时，所有输入字段都会受到影响。

null

下面是我的html代码:

<?php
if($result = mysqli_query($conn, $sql)) {
    while($row = mysqli_fetch_assoc($result)) {
        ?>
        <tr>
            <td> <?php echo $row["productname"]; ?> </td>
            <td><input type="number" name="crit" id="crit" value="<?php echo $row["quantity"]; ?>" disabled></td>
            <td><button type="button" name="edit" id="edit"><i class="fa fa-edit"></i></button></td>
        </tr>
        <?php
    }
}
?>

下面是我的javascript函数:

    $(document).ready(function() {
    var button = $('#crit');
    $(button).prop('disabled', true);

    $('#edit').click(function() {
        if ($(button).prop('disabled')) $(button).prop('disabled', false);
        else $(button).prop('disabled', true);
    });

});

一旦我单击了特定行的edit按钮，输入字段应该只在该行上启用。

Answer 1

您为所有元素赋予相同的ID-但是ID必须是唯一的。改用 属性，并使用按钮上的 查找与 类最接近的元素。

<?php
if($result = mysqli_query($conn, $sql)) {
   while($row = mysqli_fetch_assoc($result)){
   ?>
      <tr>
          <td> <?php echo $row["productname"]; ?> </td>
          <td><input type="number" class="crit" value="<?php echo $row["quantity"]; ?>" disabled></td>
          <td><button type="button" class="edit"><i class="fa fa-edit"></i></button></td>
     </tr>
    <?php
    }
}

$(document).ready(function() {
    var buttons = $('.crit');
    $(buttons).prop('disabled', true);

    $('.edit').click(function() {
        var button = $(this).closest("tr").find(".crit");  // closest element with the crit-class
        var status = button.prop("disabled");              // current status
        button.prop("disabled", !status);                  // toggle disabled 
    });
});

属性也是如此，它们也应该是唯一的。