Cách thêm mới <tr> sau <tr>

Question

Tôi có cấu trúc bảng sau đây.

<table> 
    <tr> 
     <td><a href="#"></td> 
    </tr> 
</table> 

Khi tôi bấm vào <a> Tôi muốn thêm mới <tr> bên cạnh <tr> trong đó <a> được nhấp.

Vì vậy, kết quả sẽ là:

<table> 
    <tr> 
     <td><a href="#"></td> 
    </tr> 
    <tr> 
     <td><a href="#"></td> 
    </tr> 
</table> 

Answer 1

Ví dụ:

$('a').bind('click', function(){ 
    $('<tr><td>new td</td></tr>').insertAfter($(this).closest('tr')); 
}); 

Nếu bạn muốn tạo một sử dụng bản sao:

$('a').live('click', function(){ 
    var $this  = $(this), 
     $parentTR = $this.closest('tr'); 

    $parentTR.clone().insertAfter($parentTR); 
}); 

Ví dụ link: http://www.jsfiddle.net/7A6MQ/

Về cơ bản , bạn tạo một bản sao từ tr element (bao gồm các nút con) và chèn bản sao đó sau phần tử đó. Do đó, bạn cần gắn kết .live để đảm bảo rằng các phần tử a mới được tạo cũng gọi trình xử lý nhấp chuột đó.

Ref .: .clone(), .insertAfter(), .live()

Answer 2

Ngoài ra, bạn có thể viết:

$('a').bind('click', function() { 
    $(this).closest('tr').after('<tr><td>new td<td></tr>'); 
}); 

Không quá nhiều sự khác biệt nhưng trông dễ đọc hơn.

Answer 3

Đây là mã. Vui lòng kiểm tra và cho tôi biết nếu có bất kỳ vấn đề nào.

function AddRaw(obj){ 
var $this  = obj; 
$parentTR = $this.closest('tr'); 
$parentTR.clone().insertAfter($parentTR); 
}