1

我的网页中有一个表格，只有以下代码：

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

你能帮我把它做对还是用正确的方法做？

4

2 回答 2

0

由于您的新按钮#addrow是动态创建的，因此 directe 事件绑定在这里不起作用，您需要将事件委托给现有的事件，例如 table #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>');
});
于 2013-04-07T06:10:08.930 回答
0

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

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

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

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

于 2013-05-21T16:51:34.390 回答