Question

我在Twitter Boostrap中创建了一个表

我希望能够用它做两件事

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

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

DEMO - 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（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

首先创建一个方法添加多个Input（）

在函数内部，

enter code here

.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）设置为此事件的处理程序，只要delete-row按钮是处理程序的子项，事件就会被正确委派。

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

PS：

.parents（selector）函数在DOM树中向上移动多个级别，而.parent（）在DOM树中向上移动一个级别。

.parents（selector）函数选择与选择器匹配的所有父项，因此如果有更改你最终将表放在表中（不小心确定）你应该使用.first（），确保你不要删除错误的一行。

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

Answer 6

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

on（），click（），remove（），append（）

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

从表中添加/删除行

注释

6 个答案: