RowSeaskSok
New Member
I have a table in my web page, just this code:\[code\]<table id = "grid" ></table>\[/code\]Also, this button to add three columns in one row (the elements are a: text area, a droppable area and a button).\[code\]<button class = "plus"> + </button>\[/code\]this function is run when the button is clicked:\[code\]$( ".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");});\[/code\]This runs smoothly, up to this point all good. The thing I can't make is that when the button I'm appending (class="addRow") is clicked the button is removed and the same set of three items (text area, droppable and the button) is append to the row. I want that this new button appended do the same thing.I think that the code is going to look like this:\[code\]$(".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>');});\[/code\]or like this:\[code\]$(this).parents("table").find("tr:eq("+myRow+")")(function(){ $(this).find("td:eq("+myColumn+")").append('<td><textarea/></td>');});\[/code\]can you help me make it right or do it the right way?