jquery - 从多个表中添加/删除表行并插入到一个表行中

Question

我在一个普通的 html 页面中有 4 个表。其中三个表包含需要插入到第四个表中的数据。我还需要选择删除第 4 个表中的这些行并将数据放回正确的表中。我有一个例子。从 Table1 中移动一行并将其插入 Table2，然后从 Table2 中删除该行并重新插入 Table1。每个操作都有添加和删除按钮。请参阅下面的 jQuery：

$(document).ready(function() {
// Setup the "Move Me" links
$(".rowLink").click(function () {
    // get the row containing this link 
    var row = $(this).closest("tr");

    // find out in which table it resides
    var table = $(this).closest("table");

    // move it
    row.detach();

    if (table.is("#table1")) {
        $("#table2").append(row);
    }

        else {
        $("#table1").append(row);

    }   

});

 });

 $(document).ready(function() {
    $('table a').click(function(e) {
        e.preventDefault();
    });
});

Answer 1

有了像 simon 这样的假设，我想出了这个解决方案......只是表的 id 和其中的行的类具有相同的名称，这应该可以解决它

    $(document).ready(function () {
        $(".rowlink").click(function () {
            var row = $(this).closest("tr");
            var table = $(this).closest("table");

            var IDofthetable = table.attr('id');
            var ClassoftheRow = row.attr("class");

            row.detach();

            if (ClassoftheRow==IDofthetable) {  // if it is in the parent table
                $("#tab4").append(row);  //move to table 4
            }
            else {
                $("#"+ClassoftheRow).append(row); //move to parent table
            }
        });
    });

 <table>
        <tr>
            <td>
                <table id="Table1">
                    <tr class="Table1">
                        <td>
                            <input type="submit" value="Move Me 1" name="button" id="buttonTab1_1" class="rowlink" />
                        </td>
                    </tr>
                    <tr class="Table1">
                        <td>
                            <input type="submit" value="Move Me 1" name="button" id="buttonTab1_2" class="rowlink" />
                        </td>
                    </tr>
                    <tr class="Table1">
                        <td>
                            <input type="submit" value="Move Me 1" name="button" id="buttonTab1_3" class="rowlink" />
                        </td>
                    </tr>
                </table>
            </td>
            <td>
                <table id="Table2">
                    <tr class="Table2">
                        <td>
                            <input type="submit" value="Move Me 2" name="button" id="buttonTab2_1" class="rowlink" />
                        </td>
                    </tr>
                    <tr class="Table2">
                        <td>
                            <input type="submit" value="Move Me 2" name="button" id="buttonTab2_2" class="rowlink" />
                        </td>
                    </tr>
                    <tr class="Table2">
                        <td>
                            <input type="submit" value="Move Me 2" name="button" id="buttonTab2_3" class="rowlink" />
                        </td>
                    </tr>
                </table>
            </td>
            <td>
                <table id="Table3">
                    <tr class="Table3">
                        <td>
                            <input type="submit" value="Move Me 3" name="button" id="buttonTab3_1" class="rowlink" />
                        </td>
                    </tr>
                    <tr class="Table3">
                        <td>
                            <input type="submit" value="Move Me 3" name="button" id="buttonTab3_2" class="rowlink" />
                        </td>
                    </tr>
                    <tr class="Table3">
                        <td>
                            <input type="submit" value="Move Me 3" name="button" id="buttonTab3_3" class="rowlink" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table id="tab4">
                </table>
            </td>
        </tr>
    </table

>