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

时间:2018-03-01 15:29:54

标签: javascript jquery html

我正在尝试使用.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" %}

1 个答案:

答案 0 :(得分:0)

我发现我实际上是在正确的轨道上,我不知道new GestureDetector( onTap: () { Navigator.pushNamed(context, "myRoute"); }, child: new Text("my Title"), ); 是表的引导标记,所以我将remfunc.js文件简化为

.dataTables()

});

with和html文件看起来像

/* 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',
});