Javascript 从表中添加/删除行

我在Twitter Boostrap中创建了一个表

我想用它做两件事

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

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>

添加新行
名称

注释

• 单击“删除”按钮应删除该行
• 在输入字段中键入并按“添加新行”按钮应添加新的行 表末尾的行，并填入名称

---

如果您使用的是jQuery 1.7或更高版本，则使用

.on

而不是

.live

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

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

$（'button.btn'）。单击（函数（e）{
e、 预防默认值（）；
var the_name=$.trim（$（'appendedInputButton'）.val（））；
var new_row=$（'\
\
\
\
\
\
\
');
新的_row.appendTo（$（“#用户”）；
});

请注意，在按钮中添加更具体的类名（单击以添加行时）可能值得一试，以避免任何混淆。身份证也可以

---

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

将一个类添加到您的删除链接（如删除行）中，并使用以下内容：

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

注意：“$（this）.tooltip（'destroy'）；”比“hide”好，但您的fiddle引导版本还不支持destroy。此外，如果需要，可以将$（“#users”）而不是$（document）设置为此事件的处理程序，只要“删除行”按钮是处理程序的子项，事件就会被正确委派

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

附言：

.parents（selector）函数沿DOM树向上移动不止一级，而.parent（）沿DOM树向上移动一级

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

---

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

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

在（）上，单击（），删除（），追加（）

---

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

我不知道如何获得每行的pk data（data pk）属性。那由你决定 打开文档。准备就绪

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

$（'[rel=tooltip]'）。tooltip（）；
函数bindCloseButtons（）{
$（“#用户td.taskOptions a”）。单击（函数（e）{
$（this.parent（）.parent（）.remove（）；
});
}
函数addTableRow（名称，主键）{
//名称列
变量行=$（“”）；
行。追加（“”）；
//关闭按钮
var btnClose=$（''）；
行追加（btnClose）；
$（“#用户”）。追加（行）；
bindCloseButtons（）；
$（'[rel=tooltip]'）。tooltip（）；
}
$（“#添加新”）。单击（函数（e）{
变量名称=$（“#appendedInputButton”）.val（）；
var pk=1；//TODO:在此处设置pk
addTableRow（名称、主键）；
});
bindCloseButtons（）；

这是一把小提琴：

---

首先创建一个AddmultipleInput（）方法

在函数内部

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');

---

试试这个。我希望这对您有所帮助。

在jquery中使用.remove（）和.append（）或.after（）函数。这里不需要使用

parents（）.first（）

。每个元素只有一个

tr

父元素。很好，但是您也应该更新您的答案，因为这将只绑定到DOM中当前的元素，并且他特别希望添加新行，因此您的代码不会在绑定发生后插入的行上运行。这是一个假设，但是是的，理想情况下，您还应该注意，您使用的是旧版本的jQuery，它不支持

on（）

。您应该将其替换为

live（）

。谢谢，是的，出于某种原因，我加载该版本是为了方便地加载boostrap js作为其中的唯一选项。我想我可以添加一个资源。我看到了一个你可能知道如何解决的小问题。当我添加新行时，我无法删除它。有什么想法吗？我刚才就是这么说的。您需要将（）上的

替换为
live（）
。很抱歉重新散列此内容。我尝试更新fiddle以在f/w选项中使用jquery1.9.1，并添加了引导作为参考资料。但是，即使我使用最新的jquery和
on（）
，我在删除新创建的行时仍然存在问题-知道哪里可能出错，我看不到吗？您包含的引导程序正在抛出一个错误，从而阻止它工作。你更新的代码没有问题。以下是错误>
Uncaught TypeError:无法读取
bootstrap.min.js:1
@richardnielilagan中未定义的
的属性“webkit”，与他使用的jQuery版本不符。@BenM~很公平；那么让我注意一个语义上的错误：使用
.live（）
是不好的做法。这是它在1.9版本中过时的原因，之前的两个版本都不推荐它
.delegate（）
存在于他使用的版本中。@RichardNeilagan:谢谢你给我提供建议。绑定时使用
live（）
或
on（）
。为什么？我的回答很好；）
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');
});