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

わかりました、まず最初に、属性を使用することになっているような2つの列にまたがるテーブルセルがある場合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<tbody>を持つことはあまり一般的ではありませんが、実際には可能です。<table>

<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 に答える