twitter-bootstrap 从表中添加/删除行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15000812/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add / Delete Rows from Table
提问by Redwall
I have created a table in Twitter Boostrap here
我在这里在 Twitter Boostrap 中创建了一个表格
I want to be able to do 2 things with it
我希望能够用它做两件事
1) Delete rows by pressing delete icon - will delete that row
1) 按删除图标删除行 - 将删除该行
2) Add a new name by adding text (name) to input field and then pressing "add new row"
2）通过向输入字段添加文本（名称）然后按“添加新行”来添加新名称
DEMO- http://jsfiddle.net/qxdz4/2/
演示- http://jsfiddle.net/qxdz4/2/
Looking for a way to do this with javascript / jquery
寻找一种使用 javascript / jquery 执行此操作的方法
Thanks
谢谢
My Code
我的代码
<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>
Notes
笔记
- Clicking the delete button should delete the row
- Typing into the input field and pressing "add new row" button should add a new row to the end of the table with the Name filled in
- 单击删除按钮应删除该行
- 在输入字段中键入并按“添加新行”按钮应该会在表的末尾添加一个新行，并填写名称
回答by BenM
You can easily remove the row by doing this:
您可以通过执行以下操作轻松删除该行：
$('td.taskOptions a.tip-top').on('click', function(e) {
e.preventDefault();
$(this).tooltip('hide');
$(this).parents('tr').remove();
});
Similarly, adding a new row can be done as follows:
类似地，可以按如下方式添加新行：
$('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'));
});
Please note that it might be worth adding a more specific class name to the button (when clicked to add the row) to avoid any confusion. An ID would work just as well.
请注意，可能值得向按钮添加更具体的类名（当单击以添加行时）以避免任何混淆。身也可以。
I've updated your jsFiddle with the additional functionality. You can see here.
我已经用附加功能更新了你的 jsFiddle。你可以在这里看到。
回答by Keeper Hood
I don't know how you obtain each row's pk data (data-pk) attribute. That's up to you On document.Ready
不知道你是如何获取每一行的pk数据（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();
Here's a fiddle: http://jsfiddle.net/qxdz4/16/
这是一个小提琴：http: //jsfiddle.net/qxdz4/16/
回答by Duk
First you create one method AddmultipleInput()
首先创建一个方法 AddmultipleInput()
Inside the function,
在函数内部，
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');
});
Just Try this one. I hope this is helpful to you.
试试这个。我希望这对你有帮助。
回答by cernunnos
Add a class to your delete links (like delete-row) and use something like:
将一个类添加到您的删除链接（如删除行）并使用以下内容：
$(document).on("click",".delete-row",function(ev) {
ev.preventDefault();
$(this).tooltip('hide');
$(this).parents("tr").first().remove();
});
Note: "$(this).tooltip('destroy');" would be better than "hide", but your fiddle bootstrap version doesn't support destroy yet. Also, you can set $("#users") instead of $(document) as handler for this event if you want, so long as the delete-row buttons are children of the handler the event gets delegated properly.
注意：“$(this).tooltip('destroy');” 会比“隐藏”更好，但是您的小提琴引导程序版本尚不支持销毁。此外，如果需要，您可以设置 $("#users") 而不是 $(document) 作为此事件的处理程序，只要删除行按钮是处理程序的子级，事件就可以正确委派。
To add a line the answer of BenM should work perfect.
要添加一行，BenM 的答案应该很完美。
PS:
PS：
.parents(selector) function travels more than one level up the DOM tree, while .parent() travels a single level up the DOM tree.
.parents(selector) 函数在 DOM 树上移动不止一层，而 .parent() 在 DOM 树上移动一层。
.parents(selector) function selects all parents that match the selector, so in case there is a change you end up putting a table inside a table (accidentally im sure) you should use .first(), ensuring you dont remove the wrong row.
.parents(selector) 函数选择与选择器匹配的所有父对象，因此如果发生更改，您最终将表格放入表格中（我不确定）您应该使用 .first()，确保您不会删除错误的行.
Edit: As mentioned by BenM, the previous code would not work with new lines, forgot the add part of the question, the new code should work.
编辑：正如 BenM 所提到的，以前的代码不适用于新行，忘记了问题的添加部分，新代码应该可以工作。
回答by cernunnos
I would suggest you yo use following jQuery functions:
我建议你使用以下 jQuery 函数：
on(), click(), remove(), append()
on()、click()、remove()、append()
Please do research on this, also look at the jQuery selectors in order to find how to select proper row.
请对此进行研究，同时查看 jQuery 选择器以找到如何选择正确的行。
回答by Suraj Shrestha
$('.icon-remove').live('click',function(){
$(this).parent('tr').remove();
});
If you are using jQuery 1.7 or above, then use .oninstead of .live.
如果您在使用jQuery 1.7或以上，然后用.on代替.live。
