如何追加或其他解決方案？

Question

<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 

LIVE：http://jsfiddle.net/tg5qD/

Answer 1

演示http://jsfiddle.net/eDNH5/2/

另一個工作演示http://jsfiddle.net/eDNH5/5/

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

更新anothe [R方式

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

Answer 2

您可以修改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> 

第二個解決方案將單擊處理程序附加到行而不是單元格。這樣你可以很容易地使用before（jQuery docu）。

Answer 3

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

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

Answer 4

你可能想使用prepend() insted的的append()

這裏是一個演示：http://jsfiddle.net/tg5qD/3/

Answer 5

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

演示：http://jsfiddle.net/tg5qD/4/

Answer 6

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

Demo

Answer 7

我真的引用點擊事件中使用$(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/

Answer 8

您可以使用下面的方法..首先需要找到id爲'new'的父母tr。那麼我們可以將我們的新元素附加到父元素之前。

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

Answer 9

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

閱讀.insertBefore()

DEMO