切換表中的其他行

Question

我想設置一個表來切換附加的「明細」行。從本質上講，表格被加載，如果一行被點擊，它會在所述行後面插入一個'details'行。如果再次單擊所述行，則將刪除「詳細信息」行。以下產生意想不到的結果。我想知道最好的方法是什麼？

jQuery('.tasks-table tbody tr').toggle(
    function() { 
     jQuery(this).next().remove(); 
    }, 
    function() { 
     jQuery(this).after('<tr><td colspan="10"><p style="margin-left: 50px;">lorem ipsum</p></td></tr>'); 
    } 
); 

Answer 1

切換不工作的方式：http://api.jquery.com/toggle/

你想要的是：

jQuery('.tasks-table tbody tr').bind("click", 
    function(){ 
    var $next = jQuery(this).next(); 
    if ($next.is(".info")) { //check if the next is .info or not 
     $next.remove(); //remove it is already the .info 
    }else{ 
     $next.before('<tr class="info"><td colspan="10"><p style="margin-left: 50px;">lorem ipsum</p></td></tr>'); 
    //add the info box (with a .info class) 
    } 
    } 
) 

Answer 2

嘗試：

$(".tasks-table tr").click(function() { 
    $(this).next().toggle(); 
}); 

注意，這只是切換的細節行的知名度，它不會從DOM中刪除（這應該是大多數的目的OK）