1

当我单击编辑按钮时，我有一项任务是禁用 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();
    });
});

演示在这里

4

4 回答 4

3

您可以设置一个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");
        }
    });
});

笔记：

  1. 请记住在单击或按钮时重置isEditing标志。SaveCancel
  2. 对于视觉提示，我们可能会在执行一个编辑时更改其他编辑链接的颜色（例如灰色）并取消警报消息。
于 2013-10-21T13:11:23.180 回答
0

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

/* 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 小提琴演示。

请注意，在上面，我故意避免在行的开头添加一个空单元格并在末尾添加一个额外的单元格，以维护表格结构（如果这是一个错误，在您看来，那么显然它可以很容易地调整以恢复空td，但我想不出这样做的充分理由，因为inputs 不会与它们似乎（直观地）相关的列对齐）。

当然，这里的技巧实际上只是在one 启用编辑时简单地将类添加disabled到元素中，并使用选择器（传递给以将编辑触发器限制为仅那些没有类的元素：.atron()adisableda.lnkEdit:not(".disabled")

参考：

于 2013-10-21T13:42:22.763 回答
0

我想你想要这样

 $('.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

于 2013-10-21T13:00:11.093 回答
0

尝试此代码..在开始附加之前隐藏父母的兄弟姐妹

$(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();

    });
});
于 2013-10-21T13:02:18.667 回答