Question

当我点击编辑按钮时，我有一个任务禁用tr。完成编辑后我们必须启用它。问题我可以编辑多个文件，当选择一个。我怎么能这样做？我的代码是

$(document).ready(function () {
    $('.lnkEdit').click(function () {
        $('#myTable tbody:first').append('<tr><td></td><td><input type="text" id="txtEItem"/></td><td><input type="text" id="txtEStatus"/></td><td><input type="button" value="Save" id="btnESave"/> <input type="button" value="Cancel" id="btnECancel"/></td></tr>');
        $(this).parent().parent().hide();
    });
});

演示是Here

Answer 1

只要单击“编辑”链接，您就可以拥有isEditing标记，检查是否已设置（正在编辑其他记录），并根据该标记执行所需操作。

$(document).ready(function () {
    var isEditing = false;
    $('.lnkEdit').click(function () {
        if(!isEditing){
            $('#myTable tbody:first').append('<tr><td></td><td><input type="text" id="txtEItem"/></td><td><input type="text" id="txtEStatus"/></td><td><input type="button" value="Save" id="btnESave"/> <input type="button" value="Cancel" id="btnECancel"/></td></tr>');
            $(this).parent().parent().hide();
            isEditing = true;
        }
        else{
            alert("Another row is being edited");
        }
    });
});

注意：

请务必在点击isEditing或Save按钮时重置Cancel标记。

对于visual-cue，我们可能会在执行一个Edit时更改其他Edit链接的颜色（比如灰色）并取消警告消息。

Answer 2

我想你想要这样

 $('.lnkEdit').click(function () {
        $('#myTable tr').each(function(){
        $(this).hide();
        });
        $('#myTable tbody:first').append('<tr><td></td><td><input type="text" id="txtEItem"/></td><td><input type="text" id="txtEStatus"/></td><td><input type="button" value="Save" id="btnESave"/> <input type="button" value="Cancel" id="btnECancel"/></td></tr>');
        $(this).parent().parent().hide();
    });

小提琴Here

Answer 3

尝试此代码..隐藏父母的兄弟姐妹，然后再开始追加

$(document).ready(function () {
    $('.lnkEdit').click(function () {
         $(this).parent().parent().siblings().hide(1000);
        $('#myTable tbody:first').append('<tr><td></td><td><input type="text" id="txtEItem"/></td><td><input type="text" id="txtEStatus"/></td><td><input type="button" value="Save" id="btnESave"/> <input type="button" value="Cancel" id="btnECancel"/></td></tr>');
        $(this).parent().parent().hide();

    });
});

Answer 4

虽然您已经接受了答案，但我建议如下：

/* we're replacing HTML contents, so using 'on()', rather than
   re-binding click-handlers: */
$('#myTable').on('click', 'a.lnkEdit:not(".disabled")', function(){
    // caching objects that might be used repeatedly:
    var self = $(this),
        origRow = self.closest('tr'),
        table = origRow.closest('table'),
        row = origRow.clone(),
    // creating a basic button to allow for creation of others:
        buttons = $(document.createElement('button')),
    // creating the two buttons (with their various properties):
        button1 = buttons.clone().text('Save').prop({
            'id' : 'btnESave'
        }),
        button2 = buttons.clone().text('Cancel').prop({
            'id' : 'btnECancel'
        });
    /* in the created/cloned row, emptying the first two cells,
       appending the text-input elements in the relevant cells: */
    row.find('td:lt(2)').empty().append(function(i){
        return $('<input />', {
            // setting relevant properties (edit to your taste, of course):
            'placeholder' : i === 0 ? 'Program' : 'Status',
            'type' : 'text',
            'id' : i === 0 ? 'txtEItem' : 'txtEStatus'
        });
    /* returning to the original selection with 'end()'
       finding the last 'td' element, emptying it and appending the
       previously-created buttons: */
    }).end().find('td:last-child').empty().append(button1, button2);
    // storing the original row in the jQuery data object:
    row.data('orig', origRow);
    // replacing the original row with the cloned/newly-created row:
    origRow.replaceWith(row);
    // adding the 'disabled' class to all 'a' elements currently in the table:
    table.find('a').addClass('disabled', true);
});

$('#myTable').on('click', 'button', function(){
    // caching the 'tr' since we're using it twice:
    var row = $(this).closest('tr');
    // removing the 'disabled' class-name from the 'a.disabled' elements:
    row.closest('table').find('a.disabled').removeClass('disabled');
    // replacing the current row with the storied original-row object:
    row.replaceWith(row.data('orig'));
});

JS Fiddle demo

注意，在上面，我故意避免在行的开头添加一个空单元格，并在末尾添加一个额外的单元格，以维护表格结构（如果这是一个错误，在你的意见，那么很明显可以轻松调整以恢复空td，但我想不出这样做的好理由，因为input s不会与列对齐他们似乎（直觉地）联系起来。）

当然，这里的诀窍就是简单地将disabled类添加到a元素，同时为一个tr启用编辑，并使用选择器（传递给{ {1}}仅将编辑触发器限制为没有 on()类的a元素：disabled。

参考文献：

如何在选择一个表时禁用表tr？

4 个答案: