Question

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

它是这样形成的多行：

<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和数据行绑定＆＃34;一起？

Answer 1

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

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

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

<tr>
    <td data-meta="MetaData">Data</td>
    <td data-meta="MetaData">Data</td>
</tr>

Answer 2

您可以使用<tbody>标记对行进行分组，<table>内可能会显示more then once - 也许多个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，而不是只排序行，所以它可能无法开箱即用，但这种结构可能会帮助你解决问题。

Answer 3

使用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/

[Source]

Answer 4

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

<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代码

如何使两个表行不断附加

4 个答案: