无法使用 JQuery 使多行可编辑

Question

我在 bootstrap 交互式 table 的每一行中都有一个编辑按钮。我正在尝试切换按钮字形并根据其当前状态，制作相应的行 editable.

 <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 更改为 class .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，您可以考虑将值编辑作为前缀，以便为每个按钮设置一个 ID，例如：edit1、edit2、edit3、....

至 select 您可以使用的所有这些 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>

无法使用 JQuery 使多行可编辑

Cannot make multiple rows editable using JQuery

javascript

jquery

twitter-bootstrap

jquery-events