Question

我试图基于具有相同ID的某些属性在点击时将所有子行<tr>元素追加或插入到父行<tr>元素上。

我有一个表格“ #example”。还有一些<tr>乱七八糟。我尝试了append（），apppendTo（），insertAfter（），但无济于事。

请参阅我的代码：

//HTML
<table id="example">
    <tbody>
        <tr class="parent" data-id="23">...</tr>
        <tr class="parent" data-id="20">...</tr>
        <tr class="child" data-parent="23">...</tr>
        <tr class="child" data-parent="23">...</tr>
        <tr class="child" data-parent="20">...</tr>
    </tbody>
</table>



//jQuery
$("#example tbody").on("click", "tr.parent" function () {
    var parentID = $(this).parents("tr").attr("data-id");
    var childRow = $("tr[data-parent="+parentID+"]");
    var parentRow = $(this).parents("tr[data-id="+parentID+"]");

    childRow.append(parentRow);
});

我要完成的操作是单击以下按钮：

<table id="example">
    <tbody>
        <tr class="parent" data-id="23">...</tr>
        <tr class="child" data-parent="23">...</tr>
        <tr class="child" data-parent="23">...</tr>
        <tr class="parent" data-id="20">...</tr>
        <tr class="child" data-parent="20">...</tr>
   </tbody>
</table>

Answer 1

啊！如果元素变量混合在一起。并使用每个@Taplar的after（）

parentRow.after(childRow);

根据点击属性将元素追加到元素

1 个答案: