1

所以我有一个可以对其列进行排序的表。

它由多行组成，如下所示：

<tr><td>Data</td><td>Data</td></tr>
<tr><td>    MetaData     </td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>    MetaData     </td></tr>

我希望能够按数据行排序，并让元数据行紧跟在他们拥有信息的数据行之后。但是，由于我的排序代码无法区分行之间的差异，我最终得到如下内容：

<tr><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td></tr>
<tr><td>    MetaData     </td></tr>    
<tr><td>    MetaData     </td></tr>

如何强制将 MetaData 和 Data 行“绑定”在一起？

4

4 回答 4

0

如果您按如下方式排列数据，您的数据及其关联的元数据将一起排序/移动。

<tr>
    <td>
        <table>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>    MetaData     </td></tr>
        </table>
    </td>
<tr>
<tr>
    <td>
        <table>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>    MetaData     </td></tr>
        </table>
    </td>
<tr>

这个断章取义的答案是非常糟糕的做法！我提出它的唯一原因是因为您没有提供js进行排序的实际代码

于 2012-11-20T10:16:16.777 回答
0

好的，首先，当您有一个跨越两列的表格单元格时，您应该使用该colspan属性，例如

<tr><td colspan="2">MetaData</td></tr>

现在，为了将它们联系在一起，我认为你的做法是错误的。元数据本身在逻辑上并不完全位于它自己的表行中，它应该与实际数据位于同一行中。您可以使用 HTML5 数据属性执行以下操作：

<tr>
    <td data-meta="MetaData">Data</td>
    <td data-meta="MetaData">Data</td>
</tr>
于 2012-11-20T09:35:44.283 回答
0

您可以使用标签对行进行分组，该标签可以在<tbody>其中出现不止一次<table>- 也许拥有多个 tbodies 并不常见，但实际上是可能的。

<tbody>
  <tr><td>Data</td><td>Data</td></tr>
  <tr><td>    MetaData     </td></tr>
</tbody>
<tbody>
  <tr><td>Data</td><td>Data</td></tr>
  <tr><td>    MetaData     </td></tr>
</tbody>

您仍然需要调整其他人提到的代码以按行对 tbodies 进行排序，而不是仅对行进行排序，因此它可能无法开箱即用，但这种结构可能会帮助您解决问题。

于 2012-11-20T09:37:39.513 回答
0

使用 javascript 做到这一点

function sortNum(a, b) {
    return 1 * $(a).find('.YOUR_DATA_TO_SORT').text() < 1 * $(b).find('.YOUR_DATA_TO_SORT').text() ? 0 : 1;
}
function sortTheTable(){
    $(function() {
        var elems = $.makeArray($('tr:has(.YOUR_DATA_TO_SORT)').remove())
        elems.sort(sortNum)
        $('table#TABLE_ID').append($(elems));
    });
}

这是小提琴：http: //jsfiddle.net/E56j8/

[来源]

于 2012-11-20T09:38:37.257 回答