javascript - 无法使用 JQuery 使多行可编辑

Question

Bootstrap 交互式表的每一行都有一个编辑按钮。我正在尝试切换按钮字形，并根据其当前状态，使相应的行可编辑。

 <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

I have an edit button in every row of a bootstrap interactive table. I am trying to toggle the button glyphicons and based on its current state, make the corresponding row editable.

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>