从表中添加/删除行

Question

我在这里在 Twitter Bootstrap 中创建了一个表

我想用它做两件事

1. 按删除图标删除行 - 将删除该行

2. 通过将文本（名称）添加到输入字段然后按“添加新行”来添加新名称

演示 - http://jsfiddle.net/qxdz4/2/

寻找一种使用 JavaScript / jQuery 的方法

我的代码

<div class="input-prepend input-append"><span class="add-on"><i class="icon-picture"></i></span>

<input class="span2"
id="appendedInputButton" type="text" placeholder="Add New Name Here">
<button class="btn" type="button">Add New Row</button>
</div>
<table id="users" class="table table-bordered table-condensed">
<tr>
    <th>name</th>
    <th></th>
</tr>
<tr>
    <td><a href="#" data-pk="1">Mike</a>

    </td>
    <td class="taskOptions"> <a href="#deleteProject" rel="tooltip" data-toggle="modal" class="tip-top"
        data-original-title="Delete Row"><i class="icon-remove"></i></a>

    </td>
</tr>
<tr>
    <td><a href="#" data-pk="2">John</a>

    </td>
    <td class="taskOptions"> <a href="#deleteProject" rel="tooltip" data-toggle="modal" class="tip-top"
        data-original-title="Delete Row"><i class="icon-remove"></i></a>

    </td>
</tr>
<tr>
    <td><a href="#" data-pk="3">Mary</a>

    </td>
    <td class="taskOptions"> <a href="#deleteProject" rel="tooltip" data-toggle="modal" class="tip-top"
        data-original-title="Delete Row"><i class="icon-remove"></i></a>

    </td>
</tr>
</table>

注意事项

• 单击删除按钮应删除该行
• 在输入字段中键入并按“添加新行”按钮应添加一个新行 行到表格末尾并填写了名称

Answer 1

您可以通过执行以下操作轻松删除该行：

$('td.taskOptions a.tip-top').on('click', function(e) {  
    e.preventDefault();
    $(this).tooltip('hide');
    $(this).parents('tr').remove();
});

同样地，添加新行可以按如下方式完成：

$('button.btn').click(function(e) {  

    e.preventDefault();
    var the_name = $.trim($('#appendedInputButton').val());

    var new_row = $('<tr>\
                         <td>\
                             <a href="#" data-pk="1">'+the_name+'</a>\
                         </td>\
                         <td class="taskOptions">\
                             <a href="#deleteProject" rel="tooltip" data-toggle="modal" class="tip-top" data-original-title="Delete Row"><i class="icon-remove"></i></a>\
                         </td>\
                      </tr>');
    new_row.appendTo($('#users'));
});

请注意，可能值得为按钮添加更具体的类名（单击以添加行时）以避免任何混淆。 ID 也可以。

我已经用附加功能更新了您的 jsFiddle。你可以看到here。

Answer 2

不知道你是如何获取每一行的pk数据（data-pk）属性的。这取决于你 在document.Ready

$('[rel=tooltip]').tooltip();
function bindCloseButtons(){
    $("#users td.taskOptions a").click(function(e){
        $(this).parent().parent().remove();
    });
}

function addTableRow(name , pk){

    // name column
    var row = $("<tr></tr>");
    row.append('<td><a href="#" data-pk="'+pk+'">'+name+'</a></td>');

    // close button
    var btnClose = $('<td class="taskOptions"> <a href="#deleteProject" rel="tooltip" data-toggle="modal" class="tip-top" data-original-title="Delete Row"><i class="icon-remove"></i></a></td>');

    row.append(btnClose);

    $("#users").append(row);
    bindCloseButtons();
    $('[rel=tooltip]').tooltip();
}

$("#addNew").click(function(e){
    var name = $("#appendedInputButton").val();
    var pk = 1; // TODO: set your pk here 
    addTableRow(name, pk);

});

bindCloseButtons();

这是一个小提琴： http://jsfiddle.net/qxdz4/16/

Answer 3

首先你创建一个方法AddmultipleInput()

函数内部，

    .AddMultipleInput = function (btnAddId, btnDelId, inputContainerIdPrefix, inputContainerCss, firstChildInputIdPrefix) {
    if ($('.' + inputContainerCss).length < 2) {
        $('#' + btnDelId).attr('disabled', 'disabled');
    }

    $('#' + btnAddId).click(function () {
        var num = $('.' + inputContainerCss).length; // how many "duplicatable" input fields we currently have
        var newNum = new Number(num + 1);   // the numeric ID of the new input field being added

        // create the new element via clone(), and manipulate it's ID using newNum value
        var newElem = $('#' + inputContainerIdPrefix + num).clone().attr('id', inputContainerIdPrefix + newNum);
        
        newElem.children().each(function () {
            var idPrefix = $(this).attr('id').substring(0, $(this).attr('id').length - 1);
            var namePrefix = $(this).attr('name').substring(0, $(this).attr('name').length - 1);
            $(this).attr('id', idPrefix + newNum).attr('name', namePrefix + newNum);
        })

        // insert the new element after the last "duplicatable" input field
        $('#' + inputContainerIdPrefix + num).after(newElem);

        // enable the "remove" button
         $('#' + btnDelId).attr('disabled', '');

        // business rule: you can only add 5 names
        if (newNum == 5)
            $('#' + btnAddId).attr('disabled', 'disabled');

});

    $('#' + btnDelId).click(function () {
        var num = $('.' + inputContainerCss).length;

        $('#' + inputContainerIdPrefix + num).remove();
        $('#' + btnAddId).attr('disabled', '');
        if (num == 2)
            $('#' + btnDelId).attr('disabled', 'disabled');
    });

Answer 4

$('.icon-remove').live('click',function(){
    $(this).parent('tr').remove();
});

如果您使用的是 jQuery 1.7 或更高版本，请使用 .on 而不是 .live。

Answer 5

为您的删除链接添加一个类（如 delete-row）并使用以下内容：

$(document).on("click",".delete-row",function(ev) {
    ev.preventDefault();
    $(this).tooltip('hide');
    $(this).parents("tr").first().remove();
});

注意：“$(this).tooltip('destroy');”会比“隐藏”更好，但你的小提琴引导版本还不支持销毁。此外，如果需要，您可以将 $("#users") 而不是 $(document) 设置为此事件的处理程序，只要删除行按钮是处理程序的子级，事件就会被正确委派。

要添加一行，BenM 的答案应该是完美的。

PS：

.parents(selector) 函数在 DOM 树上向上移动不止一层，而 .parent() 在 DOM 树上向上移动一层。

.parents(selector) 函数选择与选择器匹配的所有父级，因此，如果发生更改，您最终会将表格放入表格中（我很确定），您应该使用 .first()，确保不会删除行错了。

编辑：正如 BenM 所提到的，以前的代码不适用于新行，忘记了问题的添加部分，新代码应该可以工作。

Answer 6

我建议你使用以下 jQuery 函数：

on()、click()、remove()、append()

请对此进行研究，同时查看 jQuery 选择器以了解如何选择正确的行。