無法使用JQuery使多行可編輯

Question

引導程序交互表的每一行中都有一個編輯按鈕。 我試圖切換按鈕字形，並根據其當前狀態，使相應的行可編輯。

 <td><button type="button" id="edit" value="" class="btn btn-lg btn-link" data-toggle="tooltip" title ="Edit" style="color: black"><i class="glyphicon glyphicon-edit"></i></td>

和JavaScript如下

$(document).ready(function () {
        $("#edit").click(function () {
                var currentTD = $(this).parents('tr').find('td');
                if( $(this).find('i').hasClass('glyphicon-edit'))
                {       
                    currentTD = $(this).parents('tr').find('td');
                    $.each(currentTD, function () {
                        $(this).prop('contenteditable', true);
                        $(this).css('background','yellow');
                    });
                }
                else if( $(this).find('i').hasClass('glyphicon-ok-circle'))
                {                        
                    $.each(currentTD, function () {
                        $(this).prop('contenteditable', false);
                        $(this).css('background','');
                   });
                }
                $(this).find('i').toggleClass('glyphicon-edit').toggleClass('glyphicon-ok-circle');
            })

        });

問題是我只能在第一行執行此操作。 我不確定為什么會這樣。 網頁內容的新手。

Answer 1

引導程序交互表的每一行中都有一個編輯按鈕。 我試圖切換按鈕字形，並根據其當前狀態，使相應的行可編輯。

ID必須是唯一的。 您只能有一個實例。 將您的#edit ID更改為.edit類

<td>
  <button type="button" value="" class="edit btn btn-lg btn-link" data-toggle="tooltip" title="Edit" style="color: black">
    <i class="glyphicon glyphicon-edit"></i>
  </button>
</td>

Answer 2

如果要繼續使用ID，則可以考慮將edit值作為前綴，以使每個按鈕都具有一個id，例如：edit1，edit2，edit3，...。

要選擇所有這些ID，您可以使用：

$('[id^="edit"]')

因此，您的代碼是：

 $(function () { $('[id^="edit"]').click(function () { var currentTD = $(this).parents('tr').find('td'); if( $(this).find('i').hasClass('glyphicon-edit')) { currentTD = $(this).parents('tr').find('td'); $.each(currentTD, function () { $(this).prop('contenteditable', true); $(this).css('background','yellow'); }); } else if( $(this).find('i').hasClass('glyphicon-ok-circle')) { $.each(currentTD, function () { $(this).prop('contenteditable', false); $(this).css('background',''); }); } $(this).find('i').toggleClass('glyphicon-edit').toggleClass('glyphicon-ok-circle'); }) }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <table style="width:100%"> <tr> <td><button type="button" id="edit1" value="" class="btn btn-lg btn-link" data-toggle="tooltip" title ="Edit" style="color: black"><i class="glyphicon glyphicon-edit"></i></td> </tr> <tr> <td><button type="button" id="edit2" value="" class="btn btn-lg btn-link" data-toggle="tooltip" title ="Edit" style="color: black"><i class="glyphicon glyphicon-edit"></i></td> </tr> <tr> <td><button type="button" id="edit3" value="" class="btn btn-lg btn-link" data-toggle="tooltip" title ="Edit" style="color: black"><i class="glyphicon glyphicon-edit"></i></td> </tr> <tr> <td><button type="button" id="edit4" value="" class="btn btn-lg btn-link" data-toggle="tooltip" title ="Edit" style="color: black"><i class="glyphicon glyphicon-edit"></i></td> </tr> </table>