1

我需要在表格顶部添加与所述表格的列一致的一些元素。

该表包含一个<thead>（由于 jquery.tablesorter 插件，这是必需的）。我假设如果我<tbody>在.<thead><tbody><thead>

例子：

<table>
    <tbody>
        <tr>
            <td>1</td><td>1</td><td>1</td>
        </tr>
    </tbody>
    <thead>
        <tr>
            <th>head</th><th>head</th><th>head</th>
        </tr>
    </thead>        
    <tbody>
        <tr>
            <td>2</td><td>2</td><td>2</td>
        </tr>
        <tr>
            <td>3</td><td>3</td><td>3</td>
        </tr>
        <tr>
            <td>4</td><td>4</td><td>4</td>
        </tr>
    </tbody>
</table>

虽然我理解这一点，但我仍然需要找到一种方法让这些元素与特定列保持一致。

4

4 回答 4

5

您可以像这样使用多行<thead>：-

<table>

   <thead>

     <tr> <td>1</td> <td>1</td> </tr>

     <tr> <td>head</td> <td>head</td> </tr>

   </thead>

</table>
于 2012-08-12T08:51:59.467 回答
1

我建议您使用 id (#) 标记来标识您希望 js 工作的部分并让 js 使用该 id。

有了这个，有第thead一个和tbody最后一个。

您描述的变体可能会起作用-在您现在使用的浏览器中，在您还可以的操作系统上-并且可能符合特定版本的 HTML 规范-但是（以我的经验）将事物以不寻常的顺序排列只是那种在任何地方都无法工作或工作相同的事情最终会导致很多挫败感，尤其是当网站变得越来越复杂时。

于 2012-08-11T14:17:21.380 回答
0

一种解决方案是在您的头中使用一个 tr 内的另一个表。虽然，这是一个完全丑陋的解决方案。

您还可以使用 CSS 在表格上方放置一个 div。

于 2012-08-11T14:00:10.507 回答
0

正确的表结构是：

<table>
    <thead>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th></th>
            <th></th>
        </tr>
    </tfoot>
</table>

<thead>将永远在顶部，<tfoot>永远在底部。

使用jQuery您可以通过以下方式交换<thead>和<tbody>内容：

$(document).ready(function() {
    $('#myTrigger').click(function() {
        var top = $('thead').html();
        var mid = $('tbody').html();
        $('thead').html(mid);
        $('tbody').html(top);
    });
});
于 2012-08-11T14:19:25.937 回答