Question

我正在使用一个表，其中每行有三个按钮（保存，编辑，删除）。在编辑按钮上我想隐藏它并想要显示保存按钮，也希望ot make name列可编辑。在保存按钮上我想隐藏它，并想要显示编辑按钮。 html代码如下。

    <table>

        <tr>
          <td class="editablecontent">Name</td>
          <input data-edit type="button" value="Edit">
          <input data-save type="button" value="Save" class="savevarients">
          <input data-delete type="button" value="Delete">
         </tr>
         <tr>
          <td class="editablecontent">Name</td>
          <input data-edit type="button" value="Edit">
          <input data-save type="button" value="Save" class="savevarients">
          <input data-delete type="button" value="Delete">
         </tr>
         <tr>
          <td class="editablecontent">Name</td>
          <input data-edit type="button" value="Edit">
          <input data-save type="button" value="Save" class="savevarients">
          <input data-delete type="button" value="Delete">
         </tr>

    </table>

我正在使用这个jquery代码，但问题是，当我显示保存按钮时，它显示我所有的表，每行都可以编辑。我只希望在一个特定的行上。我的js代码如下。

    'click [data-edit]': function(event) {
        event.preventDefault()
        $(event.target).hide();
        $(".editablecontent").attr('contenteditable', true);
        $(".savevarients").show();
    },
    'click [data-save]': function(event) {
        event.preventDefault()
        $(event.target).hide();
        $(".editablecontent").attr('contenteditable', false);

Answer 1

替换：

$(".editablecontent").attr('contenteditable', true);
$(".savevarients").show();

使用：

$(event.target).parent().find(".editablecontent").attr('contenteditable', true);
$(event.target).parent().find(".savevarients").show();

Answer 2

您可以使用jQuerys DOM遍历方法查找单击按钮的最近td，并使用find()将所有选择器基于该按钮。试试这个：

'click [data-edit]': function(event) {
    event.preventDefault()
    var $button = $(event.target).hide();
    var $td = $button.closest(".editablecontent").attr('contenteditable', true);
    $td.find(".savevarients").show();
},
'click [data-save]': function(event) {
    event.preventDefault()
    var $button = $(event.target).hide();
    $button.closest(".editablecontent").attr('contenteditable', false);
}

Answer 3

使用jQuery的$.siblings()函数，例如：

$(event.target).siblings(".editablecontent").attr('contenteditable', true);
$(event.target).siblings(".savevarients").show();

我会通过定义目标元素来开始这个功能：

function(event) {
    $target = $(event.target);
    $target.hide();
    $target.siblings(".editablecontent").attr('contenteditable', true);
    $target.siblings(".savevarients").show();
    event.preventDefault();
}

在按钮上单击显示仅在同一行中的另一个按钮

3 个答案: