无法使用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> 

和Java脚本如下

$(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，以对每个按钮的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>