Question

我有一个表结构如下;

    <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>

现在点击图标图片（雪佛龙），我希望详细信息行显示在点击的行的正下方（它应该是包含子表的tr）。这应该在点击任何列表行时动态插入/附加。

如何使用jQuery执行此操作？任何参考的例子都非常有用..

Answer 1

以下示例创建一个新的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);
  }
});

Example Link

Answer 2

我想说有两种主要的方法可以做到这一点，你必须弄清楚哪一个最适合你;这取决于。

您所说的是在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"
});

然后，正如其他人所说，你可以通过从get go中添加这些行来解决这个问题：

<tr>
    <td><div class="icon-chevron-right"></div></td>
    <td><div>List 1</div></td>
</tr>
<tr class="collapse">
    <td colspan="2">This is my new row</td>
</tr>

然后，你的CSS应该像这样：

.collapse {
    display: none;
}

.collapse.active {
    display: block;
}

这意味着当您将active类添加到折叠行时，它会从display: none;转到display: block;。这是通过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)
});

希望这有帮助！

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

2 个答案: