从一个表附加到另一个表然后删除/操作数据

Question

我试图用.click从一个表添加到另一个表，我让它工作

但现在当我尝试使用顶部表格上的搜索字段时，它会清除底部表格中的附加行

我需要让它们开始在它下面生成一个表，以便我可以一起删除它们

$(document).ready(function(){
    $("#student-table2 tbody tr").click(function(){
        $(this).css("background-color", "#f4a941")
            .appendTo("#student-table3 tbody");

    });

    $("#student-table2").DataTable();
    $("body").on("click", "#student-table2 tbody tr", function(){
        $("#student-table3").data("stu-id", $(this).data("id"))
            .data("stu-name", $(this)
            .data("name"));

    });

    $("#access-table").DataTable();

    $(".datetimepicker").datetimepicker({
        format: 'MM/dd/yyyy hh:mm:ss',
    });

});

就像我提到的，似乎我可以将数据添加到表中，但是当我使用第一个表上的搜索字段时，它不会存储我在表2上选择的行

我在想，也许我可以让jquery生成整个表，并且已经设置了表占位符？并没有像我一样在HTML中，看到下面，我有学生表和学生表2堆叠

这是我的HTML

{% include "core/header.html" %}
{% load widget_tweaks %}

    <section class="ids-section form-section">

        <h2>{{ title }}</h2>
        <h2> All Students </h2>

        <table id="student-table2" class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>School</th>
                    <th>License Plate</th>
                    <th>Active</th>
                    <th>Code</th>
                    <th>Added</th>
                </tr>
            </thead>
            <tbody>
                {% for stu in students %}
                    <tr data-id="{{ stu.id }}" data-name="{{ stu.name }}">
                        <td>{{ stu.name }}</td>
                        <td>{{ stu.school }}</td>
                        <td>{{ stu.license_plate }}</td>
                        <td>{{ stu.active }}</td>
                        <td>{{ stu.code }}</td>
                        <td>{{ stu.created }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>

        <h2> Selected for Delete </h2>
        <table id="students-table3" class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>School</th>
                    <th>License Plate</th>
                    <th>Active</th>
                    <th>Code</th>
                    <th>Added</th>
                </tr>
            </thead>
            <tbody>
                    <br>
                    <tr data-id="{{ stu.id }}" data-name="{{ stu.name }}">
                        <td>{{ stu.name }}</td>
                        <td>{{ stu.dealership }}</td>
                        <td>{{ stu.license_plate }}</td>
                        <td>{{ stu.active }}</td>
                        <td>{{ stu.code }}</td>
                        <td>{{ stu.created }}</td>
                    </tr>
            </tbody>
        </table>
    </section>


</div>

{% include "core/footer.html" %}

Answer 1

我发现我实际上是在正确的轨道上，我不知道.dataTables()是表的引导标记所以我简化了remfunc.js文件到

/* Main part- on click adds to second table           */

$(document).ready(function(){
$("#student-table2 tbody tr").click(function(){
    $(this).appendTo("#student-table3 tbody");

});
 /* Formats the table to coginate, 
    gives it an inputFilter and wraps it.
 */
$("#student-table2").DataTable();

});

$("#access-table").DataTable();

$(".datetimepicker").datetimepicker({
    format: 'MM/dd/yyyy hh:mm:ss',
});

});

用和看起来像的HTML文件

{% include "core/header.html" %}
{% load widget_tweaks %}

    <section class="ids-section form-section">

        <h2>{{ title }}</h2>
        <h2> All Students </h2>

        <table id="student-table2" class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>School</th>
                    <th>License Plate</th>
                    <th>Active</th>
                    <th>Code</th>
                    <th>Added</th>
                </tr>
            </thead>
            <tbody>
                {% for stu in students %}
                    <tr data-id="{{ stu.id }}" data-name="{{ stu.name }}">
                        <td>{{ stu.name }}</td>
                        <td>{{ stu.school }}</td>
                        <td>{{ stu.license_plate }}</td>
                        <td>{{ stu.active }}</td>
                        <td>{{ stu.code }}</td>
                        <td>{{ stu.created }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>

        <h2> Selected for Delete </h2>
        <table id="students-table3" class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>School</th>
                    <th>License Plate</th>
                    <th>Active</th>
                    <th>Code</th>
                    <th>Added</th>
                </tr>
            </thead>
            <tbody>
                    <br>
                    <tr data-id="{{ stu.id }}" data-name="{{ stu.name }}">
                        <td>{{ stu.name }}</td>
                        <td>{{ stu.dealership }}</td>
                        <td>{{ stu.license_plate }}</td>
                        <td>{{ stu.active }}</td>
                        <td>{{ stu.code }}</td>
                        <td>{{ stu.created }}</td>
                    </tr>
            </tbody>
        </table>
    </section>


</div>

{% include "core/footer.html" %}