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

尝试：

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

注意，这只是切换详细信息行的可见性，它不会将其从DOM中删除（对于大多数用途，这应该没问题）

Answer 2

切换不起作用：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)
     }
  }
)

切换表中的其他行

2 个答案: