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

ID不能多次使用，请改用类，尝试此代码：

<?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>

Answer 2

这将是您的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>

希望这肯定会有效。

Answer 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>

jQuery函数只在第一行运行

3 个答案: