Question

我有表格和切换编辑。在这个示例中它可以工作，但是当我进入循环时，切换不想显示回来在另一行单击时变为切换编辑。这是我的表格。

$('.edit').click(function() {
  $(this).hide();
  var trs = $(this).closest('tr').siblings();
  $(trs).each(function() {
    var saveCancel = $(this).children().eq(7).find('.save, .cancel');
    if (saveCancel.length && saveCancel.is(':visible')) {
      saveCancel.hide();
      $(saveCancel).siblings('.edit').show();
    }
  });
  $('.form').find('.aaa').attr('disabled', true);
  $(this).closest('tr').find('.aaa').attr('disabled', false);
  $(this).siblings('.save, .cancel').show();
});

$('.cancel').click(function() {
  $('.form').find('.aaa').attr('disabled', true);
  $(this).siblings('.edit').show();
  $(this).siblings('.save').hide();
  $(this).hide();
});

.save,
.cancel {
  display: none;
}

<html>

<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <style>
    .save,
    .cancel {
      display: none;
    }
  </style>
</head>

<body>
  <form method='POST' class="formfield" action='EditCompany'>
    <table>
      <tbody>
        <tr align='center' class='form'>
          <td>
            <input type='hidden' class='form_id_data' name='form_id_data' value=''>
          </td>
          <td>
            <input class="form-control aaa" type="text" disabled="disabled" value='' name='company_name'>
          </td>
          <td>
            <input class="form-control aaa" type="text" disabled="disabled" value='' name='city'>
          </td>
          <td>
            <input class="form-control aaa" type="text" disabled="disabled" value='' name='state'>
          </td>
          <td>
            <input class="form-control aaa" type="text" disabled="disabled" value='' name='zipcode'>
          </td>
          <td>
            <input class="form-control aaa" type="text" disabled="disabled" value='' name='branch'>
          </td>
          <td>
            <input class="form-control aaa" type="text" disabled="disabled" value='' name='address'>
          </td>
          <td>
            <input type='button' class='edit' data-toggle="modal" data-target="#confirm-edit" value='Edit'>
            <input type='button' class='save' data-toggle="modal" data-target="#confirm-edit" value='Save'>
            <input type='button' class='cancel' data-toggle="modal" data-target="#confirm-edit" value='Cancel'>
          </td>
          <td><a href="#" data-href="DeleteCompany?id=<%= resultset.getString(1)%>" data-toggle="modal" data-target="#confirm-delete"><span class="glyphicon glyphicon-trash">Delete</span></a>
          </td>
        </tr>
        <tr align='center' class='form'>
          <td>
            <input type='hidden' class='form_id_data' name='form_id_data' value=''>
          </td>
          <td>
            <input class="form-control aaa" type="text" disabled="disabled" value='' name='company_name'>
          </td>
          <td>
            <input class="form-control aaa" type="text" disabled="disabled" value='' name='city'>
          </td>
          <td>
            <input class="form-control aaa" type="text" disabled="disabled" value='' name='state'>
          </td>
          <td>
            <input class="form-control aaa" type="text" disabled="disabled" value='' name='zipcode'>
          </td>
          <td>
            <input class="form-control aaa" type="text" disabled="disabled" value='' name='branch'>
          </td>
          <td>
            <input class="form-control aaa" type="text" disabled="disabled" value='' name='address'>
          </td>
          <td>
            <input type='button' class='edit' data-toggle="modal" data-target="#confirm-edit" value='Edit'>
            <input type='button' class='save' data-toggle="modal" data-target="#confirm-edit" value='Save'>
            <input type='button' class='cancel' data-toggle="modal" data-target="#confirm-edit" value='Cancel'>
          </td>
          <td><a href="#" data-href="DeleteCompany?id=<%= resultset.getString(1)%>" data-toggle="modal" data-target="#confirm-delete"><span class="glyphicon glyphicon-trash">Delete</span></a>
          </td>
        </tr>
        <tr align='center' class='form'>
          <td>
            <input type='hidden' class='form_id_data' name='form_id_data' value=''>
          </td>
          <td>
            <input class="form-control aaa" type="text" disabled="disabled" value='' name='company_name'>
          </td>
          <td>
            <input class="form-control aaa" type="text" disabled="disabled" value='' name='city'>
          </td>
          <td>
            <input class="form-control aaa" type="text" disabled="disabled" value='' name='state'>
          </td>
          <td>
            <input class="form-control aaa" type="text" disabled="disabled" value='' name='zipcode'>
          </td>
          <td>
            <input class="form-control aaa" type="text" disabled="disabled" value='' name='branch'>
          </td>
          <td>
            <input class="form-control aaa" type="text" disabled="disabled" value='' name='address'>
          </td>
          <td>
            <input type='button' class='edit' data-toggle="modal" data-target="#confirm-edit" value='Edit'>
            <input type='button' class='save' data-toggle="modal" data-target="#confirm-edit" value='Save'>
            <input type='button' class='cancel' data-toggle="modal" data-target="#confirm-edit" value='Cancel'>
          </td>
          <td><a href="#" data-href="DeleteCompany?id=<%= resultset.getString(1)%>" data-toggle="modal" data-target="#confirm-delete"><span class="glyphicon glyphicon-trash">Delete</span></a>
          </td>
        </tr>
      </tbody>
    </table>
  </form>
</body>

这是我的应用中的结果。

如何循环切换编辑工作？

Answer 1

更新：

目前，您的网站存在一个更基本的问题：tr全部由separte tbody包围，这使您的

var trs = $(this).closest('tr').siblings();

什么也得不到，所以他们的状态不会被检查。

临时修复：

var trs =  $(this).closest('tbody').siblings().find('tr')

请注意，使用tr包装每个tbody可能不是您打算做的。您可以替换代码，也可以不将每个tr与tbody包装在一起。

当您使用$('.edit').click(...向.edit注册事件处理程序时，它只会将该处理程序绑定到所有现有.edit，这意味着.edit是// V Parent to handler dynamically created descendants $('table').on('click', '.edit', .....); // ^ ^ It means we want that `table` to listen to // all click events from its descendants that have class edit.在未来创建的不会被该事件处理程序处理。

要解决此问题，您可以改为使用.on，正如我在评论中提到的那样，格式只需要稍微更改一下。

$('#add').click(function(){
  $('table tr.form:first').eq(0).clone()
    .appendTo($('table tbody'));
  
});

// This will only get to those 
$('table').on('click', '.edit', function() {
  $(this).hide();
  var trs = $(this).closest('tr').siblings();
  $(trs).each(function() {
    var saveCancel = $(this).children().eq(2).find('.save, .cancel');
    if (saveCancel.length && saveCancel.is(':visible')) {
      saveCancel.hide();
      $(saveCancel).siblings('.edit').show();
    }
  });
  
  $('.form').find('.aaa').attr('disabled', true);
  $(this).closest('tr').find('.aaa').attr('disabled', false);
  $(this).siblings('.save, .cancel').show();
});

// Your origin form, you can see that it won't work on newly created rows.
$('.edit').click(function() {
  console.log("Static register");
});

$('table').on('click', '.cancel', function() {
  $('.form').find('.aaa').attr('disabled', true);
  $(this).siblings('.edit').show();
  $(this).siblings('.save').hide();
  $(this).hide();
});

＆＃13;

.save,
.cancel {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">Add row</button>

<table>
      <tbody>
        <tr align='center' class='form'>
          <td>
            <input type='hidden' class='form_id_data' name='form_id_data' value=''>
          </td>
          <td>
            <input class="form-control aaa" type="text" disabled="disabled" value='' name='address'>
          </td>
          <td>
            <input type='button' class='edit' data-toggle="modal" data-target="#confirm-edit" value='Edit'>
            <input type='button' class='save' data-toggle="modal" data-target="#confirm-edit" value='Save'>
            <input type='button' class='cancel' data-toggle="modal" data-target="#confirm-edit" value='Cancel'>
          </td>
        </tr>
        <tr align='center' class='form'>
          <td>
            <input type='hidden' class='form_id_data' name='form_id_data' value=''>
          </td>
          <td>
            <input class="form-control aaa" type="text" disabled="disabled" value='' name='address'>
          </td>
          <td>
            <input type='button' class='edit' data-toggle="modal" data-target="#confirm-edit" value='Edit'>
            <input type='button' class='save' data-toggle="modal" data-target="#confirm-edit" value='Save'>
            <input type='button' class='cancel' data-toggle="modal" data-target="#confirm-edit" value='Cancel'>
          </td>
        </tr>
        <tr align='center' class='form'>
          <td>
            <input type='hidden' class='form_id_data' name='form_id_data' value=''>
          </td>
          <td>
            <input class="form-control aaa" type="text" disabled="disabled" value='' name='address'>
          </td>
          <td>
            <input type='button' class='edit' data-toggle="modal" data-target="#confirm-edit" value='Edit'>
            <input type='button' class='save' data-toggle="modal" data-target="#confirm-edit" value='Save'>
            <input type='button' class='cancel' data-toggle="modal" data-target="#confirm-edit" value='Cancel'>
          </td>
        </tr>
      </tbody>
    </table>

＆＃13;

class MyController < ApplicationController

  respond_to :json, :html

  def my_method
    #logic happens here to produce an instance variable
    render template: 'other/template', layout: 'application'
  end
end

＆＃13;

切换编辑无法在循环中工作

1 个答案: