Javascript 用于展开/折叠的jQuery动态插入行

我有一个表结构如下

    <tr>
    <td><div class="icon-chevron-right"></div></td>
    <td><div>List 1</div></td>
    </tr>
    <tr>
    <td><div class="icon-chevron-right"></div></td>
    <td><div>List 2</div></td>
    </tr>

清单1
清单2

现在单击图标图像（V形），我希望详细信息行显示在单击行的正下方（它应该是一个包含子表的tr）。这应该在单击任何列表行时动态插入/追加

---

如何使用jQuery实现这一点？任何参考示例都非常有用。

下面的示例创建了一个新的

tr

（如果不存在）包含

table

元素，该元素位于单击图标所在的

tr

下

function createChildTable(string)
{
    return $('<table>').append(
        $('<tr>').append(
            $('<td>').append(string)
        )
    );
}

$('.icon-chevron-right').click(function() {
   var details = $(this).closest('tr').next('tr.details');
   if (details.length) details.show();
   else {
    // first time clicked
    details = $('<tr>').append( createChildTable('child table details') ).addClass('details');
    $(this).closest('tr').after(details);
  }
});

函数createChildTable（字符串）
{
返回$（''）。追加(
$（''）。追加(
$（''）.append（字符串）
)
);
}
$（'.icon-chevron-right'）。单击（函数（）{
var details=$（this.nextest（'tr'）。next（'tr.details'）；
if（details.length）details.show（）；
否则{
//第一次点击
details=$（''）.append（createChildTable（'child table details'））.addClass（'details'）；
$（this）.最近（'tr'）。在（细节）之后；
}
});

---

我想说有两种主要方法可以做到这一点，你必须找出哪一种最适合你；视情况而定

您所说的是在DOM中添加一行。在某些情况下，这很好，这取决于折叠行的用途。如果您希望能够删除折叠的行并再次添加它，那么如果每次都必须通过JavaScript重新构建所有内部HTML，则可能会使您的生活变得困难

var collapseHTML = '<tr class="collapse"><td colspan="2">This is my new row</td></tr>';    

$('.icon-chevron-right').click(function() {
    $('.collapse').remove(); // Deletes all rows that has class "collapse"
    collapseHTML.insertAfter( $(this).closest('tr') ); // Inserts what's stored in collapseHTML after "this closest tr"
});

这意味着当您将

active

类添加到折叠行时，它将从

display:none至<代码>显示：块。您可以通过JavaScript/jQuery执行以下操作：

$('.icon-chevron-right').click(function() {
    $('.collapse.active').removeClass('active'); // Removes active from all active collapsed rows
    $(this).closest('tr').next().addClass('active'); // adds active class to "this closest tr's next element" (which is the collapse row)
});

希望这有帮助

.collapse {
    display: none;
}

.collapse.active {
    display: block;
}

$('.icon-chevron-right').click(function() {
    $('.collapse.active').removeClass('active'); // Removes active from all active collapsed rows
    $(this).closest('tr').next().addClass('active'); // adds active class to "this closest tr's next element" (which is the collapse row)
});