javascript - jQuery 函数仅在第一行运行

Question

我已经将所有值从数据库提取到表中

foreach ( $result as $print )   {
    ?>
<form method="post">
    <tr>
        <td><a href="#" id="edit-btn">Edit</a></td>
</tr>
<tr>
<div class="edit-box1">
   <input id="idd" type="text" readonly="readonly" value="<?php echo $idd; ?>" name="status111">
   <input type="submit" value="GO" name="edit-go">
</div>
</tr>
</form>
}

这是 jQuery 代码:

   jQuery(document).ready(
    function() {
        jQuery("#edit-btn").click(function() {
            jQuery("#idd").prop("readonly", false);
        });
    });

问题是我有 20 行，而我的编辑按钮只在第一行运行。

如何让 jQuery 在所有行上运行？

Answer 1

这将是您的 HTML

$cnt=0;
foreach ( $result as $print )   {
?>
    <form method="post">
        <tr>
            <td><a href="#" class="edit-button" id='<?php echo $cnt;?>'>Edit</a></td>
        </tr>
        <tr>
        <div class="edit-box1">
            <input id="idd<?php echo $cnt;?>" type="text"  readonly="readonly" value="<?php echo $idd; ?>" name="status111">
            <input type="submit" value="GO" name="edit-go">
            <?php $cnt++; ?>
        </div>
        </tr>
     </form>
}

这将是您的 jquery 代码

<script>

   jQuery(document).ready(
       function() {
           jQuery(".edit-button").click(function() {
           jQuery("#idd"+$(this).attr("id")).prop("readonly", false);
       });
   });
</script>

希望这一定会奏效。