Question

我在引导交互式表的每一行都有一个编辑按钮。我试图切换按钮glyphicons并根据其当前状态，使相应的行可编辑。

@interface MySettings : VBSettings

@property (strong, nonatomic) NSString *hello;

@end

java脚本如下

MySettings settings = [[MySettings alloc] init];
settings.hello = "World!"; //The value is saved in NSUserDefaults
NSLog(@"%@", settings.hello); //The value is restored from NSUserDefaults.

问题是我只能在第一行执行此操作。我不确定为什么会这样。这是网络新手。谢谢！

Answer 1

我在引导交互式表的每一行都有一个编辑按钮。我试图切换按钮glyphicons并根据其当前状态，使相应的行可编辑。

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，您可以将值编辑视为前缀，以便为每个按钮添加如下ID：edit1，edit2，edit3，....

要选择所有可以使用的ID：

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

所以你的代码是：

＆＃13;

$(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');
  })
});

＆＃13;

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

＆＃13;

使用JQuery无法使多行可编辑

2 个答案: