使用JQuery在HTML表中追加单元格
使用JQuery在HTML表中追加单元格
提问于 2013-04-07 13:37:31
我的网页中有一个表格，代码如下：
<table id = "grid" >
</table>此外，此按钮可在一行中添加三列(元素为:文本区域、可拖放区域和按钮)。
<button class = "plus"> + </button>此函数在单击按钮时运行：
$( ".plus" ).button().click(function() {
$('<tr></tr>').appendTo("#grid");
$('<td><textarea/></td>').appendTo("#grid tr:last");
$('<td id = "regla"></td>').droppable( drpOptions ).appendTo("#grid tr:last");
$('<td><button class = "addRow"> + </button></td>').appendTo("#grid tr:last");
});这运行得很顺利，到目前为止一切都很好。我不能做的事情是，当我正在添加的按钮(class="addRow")被单击时，该按钮将被移除，并且同一组三个项目(文本区、droppable和按钮)被附加到行中。我想让这个附加的新按钮做同样的事情。
我认为代码将如下所示：
$(".addRow").button().click(function(){
var myColumn = $(this).closest("td").prevAll("td").length;
var myRow = $(this).closest("tr").prevAll("tr").length;
$("#grid").rows[myRow].cells[myColumn].append('<td><textarea/></td>');
});或者像这样：
$(this).parents("table").find("tr:eq("+myRow+")")(function(){
$(this).find("td:eq("+myColumn+")").append('<td><textarea/></td>');
});你能帮我改正还是用正确的方式做吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-05-22 00:51:34
我只是碰巧自己尝试这样做，并最终得到了一个等同于以下内容的结果：
$( ".plus" ).button().click(function() {
addRow();
});
function addRow() {
var newRow = $('<tr></tr>').appendTo($('#grid'));
addRowContents(newRow);
}
function addRowAfter(target) {
var newRow = $('<tr></tr>');
addRowContents(newRow);
target.after(newRow);
}
function addRowContents(row) {
$('<td><textarea/></td>').appendTo(row);
$('<td id = "regla"></td>').droppable( drpOptions ).appendTo(row);
var buttonCell = $('<td></td>').appendTo(row);
$('<button></button>').addClass('addRow').text('+').click(function(){
addRowAfter($(this).closest('tr'));
$(this).hide();
}).appendTo(buttonCell);
}我相信这就是您想要的，加号按钮在表格的末尾添加新行，每行上的按钮直接在该行后面添加新行，然后隐藏按钮。如果您将该代码粘贴到您的小提琴中，它应该可以工作。
有点晚了，但我想我还是发帖吧，以防万一:)
Stack Overflow用户
发布于 2013-04-07 14:10:09
由于您的新按钮#addrow是动态创建的，因此直接事件绑定在这里不起作用，您需要将事件委托给现有的按钮绑定，如表#grid。您需要创建一个var addBtn = $(".addRow").button();，并在带有.on()处理程序的事件委派中使用此变量：
var addBtn = $(".addRow").button();
$("#grid").on('click', addBtn, function(){
var myColumn = $(this).closest("td").prevAll("td").length;
var myRow = $(this).closest("tr").prevAll("tr").length;
$("#grid").rows[myRow].cells[myColumn].append('<td><textarea/></td>');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15859266
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号