テーブルの追加の行を切り替えます

Question

追加の「詳細」行を切り替えるテーブルを設定しようとしています。基本的には、表がロードされます。行がクリックされた場合、その行の後に「詳細」行が挿入されます。上記の行が再びクリックされた場合、「詳細」行が削除されます。次の結果は予想外の結果をもたらします。私は最高のアプローチが何になるのだろうと思っていましたか？

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する必要があります）