当另一行单击时，切换按钮返回更改

Question

这是我使用toogle编辑的表单。

<% while(resultset.next()){ %>
	<form method='POST' class="formfield" action='EditCompany'>
	<tbody>
	<tr align='center' class='form'>
	<td><%= no %><input type='hidden' class='form_id_data' name='form_id_data' value='<%= resultset.getString(1)%>'></td>
	<td><input class="form-control aaa" type="text" disabled="disabled" value='<%= resultset.getString(2)%>' name='company_name'></td>	
	<td><input class="form-control aaa" type="text" disabled="disabled" value='<%= resultset.getString(3)%>' name='city'></td>	
	<td><input class="form-control aaa" type="text" disabled="disabled" value='<%= resultset.getString(4)%>' name='state'></td>	
	<td><input class="form-control aaa" type="text" disabled="disabled" value='<%= resultset.getString(5)%>' name='zipcode'></td>	
	<td><input class="form-control aaa" type="text" disabled="disabled" value='<%= resultset.getString(6)%>' name='branch'></td>	
	<td><input class="form-control aaa" type="text" disabled="disabled" value='<%= resultset.getString(7)%>' name='address'></td>
	<td>
	<a class="edit"><span class='glyphicon glyphicon-pencil'></span></a>
   	<input type='button' class='save' data-toggle="modal" data-target="#confirm-edit" value='Save'> 
    <a class="cancel"><span class='glyphicon glyphicon-remove'></span></a>
	<td><a href="#" data-href="DeleteCompany?id=<%= resultset.getString(1)%>" data-toggle="modal" data-target="#confirm-delete"><span class="glyphicon glyphicon-trash"></span></a></td>
</tr>
</tbody>
</form>
<% no++; } %>

这是JS toogle，按钮编辑，保存和中心。

<!-- Toggle Edit -->
<script>
$('.edit').click(function() {
    $(this).hide();
    $('.form').find('.aaa').attr('disabled',true);
	$(this).closest('tr').find('.aaa').attr('disabled',false);
    $(this).siblings('.save, .cancel').show();
});
</script>
<script>
$('.cancel').click(function() {
	$('.form').find('.aaa').attr('disabled',true);
    $(this).siblings('.edit').show();
    $(this).siblings('.save').hide();
    $(this).hide();
});
</script>

    <!-- Modal Edit Alert Script class Save-->
    <script type="text/javascript">
    $('#submit').click(function(){
        $('.formfield').submit();
	});
    </script>

切换编辑存在问题。当我想编辑第二行时单击编辑第一行显示按钮'保存'时，第一行中的按钮'保存'仍显示。 像这样

  

如何使第一行中的按钮保存再次更改为按钮更改。

Answer 1

这可能会对你有所帮助。

代码段：

$('.edit').click(function () {
      $(this).hide(); 
      $(this).siblings('.edit').show();
      var trs = $(this).closest('tr').siblings();          
      $(trs).each(function () {
          //Check for the save and cancel button and hide them.
          var saveCancel = $(this).children().eq(7).find('.save, .cancel');
          if(saveCancel.length)
              saveCancel.hide();
      });                             
      $('.form').find('.aaa').attr('disabled', true);
      $(this).closest('tr').find('.aaa').attr('disabled', false);
      $(this).siblings('.save, .cancel').show();
  });

<强>更新

FIDDLE SAMPLE

更新了代码段：

$('.edit').click(function () {
    $(this).hide();//hide the edit button
    var trs = $(this).closest('tr').siblings(); //get the sibling TR elements of clicked row.
    //loop every TR elements
    $(trs).each(function () {
        var saveCancel = $(this).children().eq(7).find('.save, .cancel');//get the children of TR element that is TD. In which go to the 7th TD. Because that is the TD which holds edit, save and cancel buttons. From that TD find for save and cancel buttons.
        //Then check for the presence of save and cancel buttons.
        if (saveCancel.length && saveCancel.is(':visible')) {
            saveCancel.hide();//And then hide the both save and cancel buttons.
            $(saveCancel).siblings('.edit').show();//After hiding the save & cancel buttons, display their's edit button.
        }
    });        
    $('.form').find('.aaa').attr('disabled', true);
    $(this).closest('tr').find('.aaa').attr('disabled', false);
    $(this).siblings('.save, .cancel').show();
});

如果有帮助，请告诉我。