Как добавить после или другое решение?

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 

Прямой эфир:http://jsfiddle.net/tg5qD/

Answer 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>"); 
})​ 

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 Fiddle: http://jsfiddle.net/tg5qD/11/

Answer 8

Вы можете использовать следующий способ ..Сначала нужно найти родителя tr идентификатора 'new'. то мы можем добавить наш новый элемент до родительского элемента.

$('#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