Question

我有通过php为每个加载的表。

Answer 1

解决方案是首先禁用所有输入，然后启用被点击的输入：

$("td.group-name input").on('click', function() {
     // disable all inputs
    $("td.group-name input").attr("readonly", true);
     // enable this input
    $(this).attr("readonly", false);
     // hide all 'Save'
    $('td.group-save').hide();
     // show this 'Save'
    $(this).parent().parent().find('td.group-save').show();
     // show all 'Edit'
    $('td.group-edit').show();
     // hide this 'Edit'
    $(this).parent().parent().find('td.group-edit').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr style="line-height: 20px;">
    <td class="group-name">
      <input class="form-control" readonly type="text" value="<?= $name[0] ?>" />
    </td>
    <td class="group-id" style="display: none;">
      <input class="form-control" readonly type="text" value="<?= $name[2] ?>" />
    </td>
    <td class="group-edit">
      <a href="#" class="edit" style="font-style: italic;">Edit</a>
    </td>
    <td class="group-save" style="display: none;">
      <a id="editName" href="#"style="font-style: italic;">Save</a>
    </td>
    <td class="group">
      <a href="#" id="removeName" style="font-style: italic;">Remove</a>
    </td>
  </tr>
  <tr style="line-height: 20px;">
    <td class="group-name">
      <input class="form-control" readonly type="text" value="<?= $name[0] ?>" />
    </td>
    <td class="group-id" style="display: none;">
      <input class="form-control" readonly type="text" value="<?= $name[2] ?>" />
    </td>
    <td class="group-edit">
      <a href="#" class="edit" style="font-style: italic;">Edit</a>
    </td>
    <td class="group-save" style="display: none;">
      <a id="editName" href="#"style="font-style: italic;">Save</a>
    </td>
    <td class="group">
      <a href="#" id="removeName" style="font-style: italic;">Remove</a>
    </td>
  </tr>
</table>

Answer 2

首先，您应该为所有输入添加一个公共类：

<input class="myInput">

然后，在允许编辑所需输入之前，您可以只读取所有输入：

$("td.group-name input").live('click', function() {
    $(".myInput").attr("readonly", true); // this makes all the inputs readonly
    $(this).attr("readonly", false); // and here you make your input writable
    $(this).focus();
    $(this).closest('tr').find('td.group-edit').hide();
    $(this).closest('tr').find('td.group-save').show();
});

您也可以编写自己的函数（使用该类），将所有行的状态重置为＆＃34;不进行编辑＆＃34;，然后在使行可编辑之前调用此函数：

function resetEverything(){
    $(".myInput").each(function(key, row){
         $(row).find("td.group-name input").attr("readonly", false);
         $(row).find("td.group-edit").show();
         $(row).find("td.group-save").hide();
    }); 
}

Answer 3

首先，jQuery函数的定义$("td.name input")只会捕获第一个td，因为它正在查找td的类{{1}的输入}} 只要。

其次，name已被弃用，请改用.live()，例如this

第三，定义一个所有.on可以共享的公共类是明智的，也许

td

选择点击的元素后，您可以使用对<td class"focusable">... </td>的调用。然后使用.siblings()方法迭代each()创建的数组，关闭其只读状态。就这样：

.siblings()

如何在一行编辑Jquery时禁用其他表行

3 个答案: