2

我正在向表中添加脚注，但表中的每一行都必须有一个 tbody。这是因为我正在向以这种方式生成 html 的现有系统添加合适的排序和过滤。

每次您尝试按列标题对表格进行排序时，似乎都会导致列排序重复​​表格行，我不明白为什么。

表结构有点像这样：

<table data-filter="#filter" class="footable table demo">
<thead>
    <tr>
        <th>Name</th>
        <th>Job Title</th>
        <th>Status</th>
        <th>Description</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Name1</td>
        <td>Job Title1</td>
        <td>Active</td>
        <td>Description1</td>
    </tr>
</tbody>
<tbody>
    <tr>
        <td>Name2</td>
        <td>Job Title2</td>
        <td>Disabled</td>
        <td>Description2</td>
    </tr>
</tbody>
</table>

javascript:

$(function () {
    $("table").footable().bind("footable_filtering", function (e) {
        var selected = $(".filter-status").find(":selected").text();
        if (selected && selected.length > 0) {
            e.filter += (e.filter && e.filter.length > 0) ? " " + selected : selected;
            e.clear = !e.filter;
        }
    });

    $(".clear-filter").click(function (e) {
        e.preventDefault();
        $(".filter-status").val("");
        $("table.demo").trigger("footable_clear_filter");
    });

    $(".filter-status").change(function (e) {
        e.preventDefault();
        $("table.demo").trigger("footable_filter", {
            filter: $("#filter").val()
        });
    });
});

我还设置了一个工作 jsfiddle 来演示该问题：https ://jsfiddle.net/35ht6kup/9/

有人知道如何解决这个问题吗？

4

1 回答 1

0

您可以使用 jQuery 重建表，例如（使用比“表”更好的选择器进行细化）：

$(document).ready(function(){
    var thead = $('table thead');
    var tbodyhtml;

    $('table tbody').each(function(){
       tbodyhtml += $(this).html();
    });

    $('table').html(thead);
    $('table').append('<tbody>'+tbodyhtml+'</tbody>');
});
于 2015-08-12T13:14:09.397 回答