Edit

Функция jQuery запускается только в первом ряду

79 просмотра

3 ответа

Я уже извлек все значения из базы данных в таблицу

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 работать на всех строках?

Автор: Hammad Источник Размещён: 08.11.2019 11:17

Ответы (3)


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>

Надеюсь, это сработает наверняка.

Автор: Dhaval Purohit Размещён: 20.08.2016 12:31

1 плюс

Идентификатор нельзя использовать более одного раза, вместо этого используйте класс, попробуйте этот код:

<?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>
Автор: Rohit Khatri Размещён: 20.08.2016 12:19

0 плюса

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>

Автор: Ehsan Размещён: 20.08.2016 12:15
Вопросы из категории :
32x32