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

Question

我在普通的html页面中有4个表。其中三个表包含需要插入第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

假设像西蒙一样，我想出了这个解决方案...... 只是为表的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

＆GT;