Question

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

我已经在javascript函数以及按钮和输入字段标签中使用了类选择器。

这是我的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);
    });

});

单击特定行的编辑按钮后，应仅在该行上启用输入字段。

Answer 1

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

<?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 
    });
});

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

JavaScript函数仅适用于表格的第一行

1 个答案: