3

構造のあるテーブルを使用しています

<table cellspacing="0" cellpadding="3" rules="cols" border="1" id="ctl00_Content_GrdCustomer" style="color:Black;border-color:#999999;width:640px;border-collapse:collapse;">
    <tr style="color:White;background-color:Black;font-weight:bold;">
        <th scope="col">Something</th>
        <th scope="col">Client Name</th>
        <th scope="col">Address</th>
        <th scope="col">Place</th>
        <th scope="col">City</th>
        <th scope="col">Country</th>
    </tr>
    <tr class="home-history-grid-row customerData">
        <td align="center" style="width:50px;"><!--Checkbox Goes Here--></td>
        <td align="center">Raju Varghese</td>
        <td align="center">&nbsp;</td>
        <td align="center">&nbsp;</td>
        <td align="center">&nbsp;</td>
        <td align="center">Country4</td>
    </tr>
    <tr class="home-history-grid-row customerData">
        <td align="center" style="width:50px;"><!--Checkbox Goes Here--></td>
        <td align="center">Joseph K. J</td>
        <td align="center">&nbsp;</td>
        <td align="center">&nbsp;</td>
        <td align="center">&nbsp;</td>
        <td align="center">Country4</td>
    </tr>
</table>

ヘッダーが「クライアント名」の「th」に基づいてテーブルを並べ替える必要があります。非常に多くのリンクを通過し、すべてがヘッダーのクリックに基づいて並べ替えられており、JavaScriptについてはよくわかりません。親切に助けて

4

3 に答える 3

4

JavaScript についてよくわからない場合は、tablesorter をお勧めします。

tablesorter.com

jQuery が含まれていることを確認してから、tablesorter の JS および CSS ファイルを含めます。また、ヘッドをタグでラップし、ボディをタグでラップする必要があります。ウェブサイトのドキュメントには、必要なすべての情報が含まれています

于 2012-07-20T03:51:11.010 に答える
1

あなたの投稿には詳細が欠けていたため、正確な状況はわかりませんが、別のアプローチの方が管理しやすいと思うかもしれません.

[6][n]可能であれば、n がテーブルに格納する予定のエントリの数であるメンバーを持つ JavaScript で 2 次元配列を作成する必要があります。配列を作成したら、すべてのデータを配列にハード コードします。配列にデータを取得したら、対応する行を並べ替えてから、for ループを使用して html テーブルにデータを入力します。

このアプローチは、HTML ページからデータをロードすることを心配する必要がなく、現在のアプローチのようにテーブル全体を新しく生成されたテーブルに置き換える必要がないため、頭痛の種が大幅に軽減されます。

ご質問がある場合、またはさらに説明が必要な場合は、以下にコメントしてください。

乾杯とハッピーコーディング！

于 2012-07-20T03:48:58.093 に答える
0

ユーザーがクリックして開始する必要なく、特定の列に基づいてテーブルを並べ替えたいだけのように聞こえます。

これは、DataTables を使用して行うことができます。データテーブルを初期化するときに、ソートする列を指定できます。

$(document).ready(function() {
oTable = $('#ctl00_Content_GrdCustomer').dataTable( {
    "aaSorting": [[ 1, "asc" ]]
} );

} );

API には、初期化後に再ソートするために使用できる関数 fnSort も含まれています。いつでも再ソートするには、次のような呼び出しを行う必要があります。

 // Sort immediately with columns 0 and 1
 oTable.fnSort( [ [0,'asc'], [1,'asc'] ] );
于 2012-07-20T06:35:09.807 に答える