jQuery 函数只在第一行运行答案

【问题标题】：jQuery function run just in first rowjQuery 函数只在第一行运行
【发布时间】：2016-12-27 11:54:45
【问题描述】：

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

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 在所有行上运行？

【问题讨论】：

您必须为所有行添加不同的 ID，或者您也可以从添加类中选择行
例如让我给你完整的代码。在回答
即使从数据库中获取数据，我如何在每行上添加不同的 ID
好的，但也请指导我
How to select all elements with a particular ID in jQuery?的可能重复

标签： javascript php jquery mysql wordpress

【解决方案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>

希望这一定会奏效。

【讨论】：

现在还好吗？ @安德烈亚斯
现在这是最终编辑，应该没有问题。@Andreas
先生问题是当我使用检查元素时，它会在所有行中显示 id="0"
你复制了<?php $cnt++; ?>@Hammad
抱歉，我只是忘了在 for 循环之前声明 $cnt @Hammad

【解决方案2】：

Id不能多次使用，改用class，试试这个代码：

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

<script>
    jQuery(document).on('click','.edit-btn',function(){
        jQuery(this).closest('.form').find('.idd').prop('readonly',false);
    });
</script>

【讨论】：

当我使用此代码时，我的代码搞砸了，先生

【解决方案3】：

1) 所有id 转换class

2) 使用方法removeAttr("readonly")

<tr>
    <td><a href="#" class="edit-btn">Edit</a></td>
</tr>

<input class="idd" type="text" readonly="readonly" value="<?php echo $idd; ?>" name="status111">

你可以使用$(".idd").removeAttr("readonly")

 $(document).ready(function(){
           $(".edit-btn").click(function(){
              $(".idd").removeAttr("readonly");
               $(".idd:first").focus();

           })
       })

例子：

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <tr>
        <td><a href="#" class="edit-btn">Edit</a></td>
        </tr>
        <input type="text" class="idd" readonly>
        <input type="text" class="idd" readonly>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
           $(document).ready(function(){
           $(".edit-btn").click(function(){
              $(".idd").removeAttr("readonly");
               $(".idd:first").focus();
               
           })
       })
        </script>
    </body>
</html>

【讨论】：

@Hammad，检查更新的答案！
当我点击编辑时，即使我点击第二行的编辑，它也会关注第一行