1

私のWebページには、次のコードだけの表があります。

<table id = "grid" >
</table>

また、このボタンは、1 行に 3 つの列を追加します (要素は、テキスト領域、ドロップ可能領域、およびボタンです)。

<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") をクリックすると、ボタンが削除され、同じ 3 つの項目 (テキスト領域、ドロップ可能、ボタン) のセットが行に追加されることです。 . この新しいボタンを追加して同じことをしたいです。

コードは次のようになると思います。

$(".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は動的に作成されるため、ダイレクト イベント バインディングはここでは機能しないため、イベントを 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); 
}

これがあなたが求めていたものだと思います.plusボタンはテーブルの最後に新しい行を追加し、各行のボタンはその行の直後に新しい行を追加してからボタンを非表示にします. そのコードをフィドルに貼り付けると、動作するはずです。

少し遅れましたが、役立つ場合に備えて投稿すると思いました:)

于 2013-05-21T16:51:34.390 に答える