1 
<table border="2">
    <tr><td>one</td><td>two</td></tr>
    <tr><td>one</td><td>two</td></tr>
    <tr><td colspan="2" id="new" >add new</td></tr>
</table>

$('#new').click(function(){
   $('#new').append("<tr><td>one</td><td>two</td></tr>");
})

「新規追加」をクリックすると、次のようになります。

one | two
one | two
add new
one  two

どのように私は作ることができます:

one | two
one | two
one | two
add new

ライブ: http://jsfiddle.net/tg5qD/

4

9 に答える 9

2 
$('#new').click(function(){
   $('#new').parent('tr').before("<tr><td>one</td><td>two</td></tr>");
})​

デモ

于 2012-06-01T09:01:16.053 に答える
1

次の方法でJavaScriptコードを変更できます。

$('#new').click(function(){
   $('#new').parent().before("<tr><td>one</td><td>two</td></tr>");
})

または、HTMLも変更して、そのスクリプトを使用します。

<table border="2">
    <tr><td>one</td><td>two</td></tr>
    <tr><td>one</td><td>two</td></tr>
    <tr id="new"><td colspan="2" >add new</td></tr>
</table>
<script>
  $('#new').click(function(){
    $('#new').before("<tr><td>one</td><td>two</td></tr>");
  });
</script>

2番目の解決策は、セルではなく行にクリックハンドラーを追加します。そうすれば、簡単に使用できますbefore（jQuery docu）。

于 2012-06-01T08:57:54.510 に答える
1

http://jsfiddle.net/tg5qD/5/

$('#new').on('click', function(){
   $('#new').parent().before("<tr><td>one</td><td>two</td></tr>");
})​
于 2012-06-01T08:58:12.413 に答える
1

デモ http://jsfiddle.net/eDNH5/2/

別の実用的なデモ http://jsfiddle.net/eDNH5/5/

API: http://api.jquery.com/before/

別の方法で更新

$('#new').click(function(){
    $('table tr:last').before('<tr><td>one</td><td>two</td></tr>');
})​

コード

$('#new').click(function(){
   $('#new').parent().before("<tr><td>one</td><td>two</td></tr>");
})​
于 2012-06-01T08:58:30.947 に答える
1

append( )の代わりにprepend()を使用したい場合があります。

ここにデモがあります：http://jsfiddle.net/tg5qD/3/

于 2012-06-01T08:59:46.080 に答える
1

$(this)実際には、クリック イベント内で使用して、新しい追加ボタンを参照します。DOM で要素を再度検索する手間を省きます。

$('#new').click(function(){
   $(this).parent().before("<tr><td>one</td><td>two</td></tr>");
})

さらに良いことに、.onイベント オブジェクトを使用すると、必要に応じて後でこのクリック イベントをオフにする柔軟性があります。

$('#new').on({
   "click.addNew": function(){
       $(this).parent().before("<tr><td>one</td><td>two</td></tr>");
   }
})

JS フィドル: http://jsfiddle.net/tg5qD/11/

于 2012-06-01T09:08:21.737 に答える
1

次の方法を使用できます。まずtr、ID 'new' の親を見つける必要があります。次に、新しい要素を親要素の前に追加できます。

$('#new').click(function(){
   $(this).parent('tr').before("<tr><td>one</td><td>two</td></tr>");
})​
于 2012-06-01T09:12:24.637 に答える
1 
$('#new').click(function(){
   $("<tr><td>one</td><td>two</td></tr>").insertBefore($(this).parent());
});

.insertBefore()について読む

デモ

于 2012-06-01T09:32:02.077 に答える
1 
$('#new').click(function(){
   $('#new').parent('tr').before("<tr><td>one</td><td>two</td></tr>");
})

デモ: http://jsfiddle.net/tg5qD/4/

于 2012-06-01T09:00:34.713 に答える