使用 JQuery 在 HTML 表格中追加一个单元格

Question

我的网页中有一个表格，只有这段代码：

<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") 时，该按钮被删除，并且同一组的三个项目（文本区域、可放置和按钮）被附加到该行.我希望附加的这个新按钮做同样的事情。

我认为代码将如下所示：

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

你能帮我把它改正或以正确的方式做吗？

Answer 1

我只是偶然发现自己尝试这样做并最终得到了与此等效的结果：

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

我相信这就是您所追求的，加号按钮在表格末尾添加一个新行，每行上的按钮在该行之后直接添加一个新行，然后隐藏按钮。如果您将该代码粘贴到您的小提琴中，它应该可以工作。

有点晚了，但我想我会发布以防万一它有帮助:)

Answer 2

由于您的新按钮#addrow 是动态创建的，因此directe 事件绑定在此处不起作用，您需要将事件委托给现有的事件，例如表#grid。您需要创建一个 var addBtn = $(".addRow").button(); 并在事件委托中使用此 var 和 .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>');
});