Javascript函数仅适用于表格的第一行[重复]

Posted 2023-05-09

【中文标题】Javascript函数仅适用于表格的第一行[重复]

【英文标题】：Javascript function ONLY works on the first row of the table [duplicate]

【发布时间】：2019-10-17 07:16:24

【问题描述】：

我的表格中的每一行都有一个编辑按钮，其中有一个 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);
    );

);

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

【问题讨论】：

您对每个元素使用相同的 ID。 ID 必须是唯一的。改用一个类。

当我使用类时，所有输入字段的行都会被启用。我只想在单击“编辑”按钮的特定行上启用输入字段。

看这里以获得一些理解：***.com/questions/23572428/…

@Mnlhorse 这可以通过类来完成。您只需要了解上下文查找。在事件处理程序内部this 将引用正在处理事件的元素。

【参考方案1】：

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

<?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 属性也是如此，它们也应该是唯一的。

【讨论】：

@Taplar 您是对的，但总体而言答案实际上是正确的。只需替换 var button = $(this).closest(".crit"); with var button = $(this).closest("tr").find('.crit');

非常感谢你们。我已经将给定的解决方案编辑为正确的代码 $(this).closest("tr").find(".crit")

@Qirel 非常感谢您提供 Javacript 的示例代码