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

【问题标题】：Add/remove table rows from multiple tables and insert into one table row从多个表中添加/删除表行并插入到一个表行中
【发布时间】：2013-01-13 07:28:26
【问题描述】：

我在一个普通的 html 页面中有 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();
    });
});

【问题讨论】：

如果你说你有这个工作，你的问题到底是什么？
能否发布您的 HTML？
所以你需要从不同的表中收集多行并收集到另一个表中，但是当再次从这个新表中删除它们时，它们必须“返回”到原来的位置？

标签： jquery html-table

【解决方案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

【讨论】：