-1

以下のhtmlテーブルがあり、ヘッダーは別のテーブルにあり、コンテンツは別のテーブルにあります。別のテーブルにあるヘッダーをクリックすると、テーブルを並べ替える必要があります。

ヘッダーが同じテーブルにある場合にのみ機能する非常に多くのJavaScriptの例を見つけました。私のタスクに関連する例を教えてもらえますか?

<html> 
    <table > 
        <tr>
            <th>Name</th>
            <th>Salary</th>
        </tr> 
    </table> 
    <table>
        <tr>
            <td>Fred</td>
            <td>$12000.00</td>
        </tr> 
        <tr>
            <td>Kevin</td>
            <td>$191200.00</td>
        </tr> 
    </table>
</html>
4

2 に答える 2

1

列セルと関連するヘッダーが同じクラス名を持つようにいくつかのクラスを列に追加する場合、他の既存の JavaScript ソリューションを活用することはそれほど難しくありません。

例として、この単純な JQuery ソート関数を使用して、この JSFiddle デモを作成しました。

HTML を次のように変更しました。

<html> 
    <table id="heading"> 
        <tr>
            <th class="name-col">Name</th>
            <th class="salary-col">Salary</th>
        </tr> 
    </table> 
    <table id="data">
        <tr>
            <td class="name-col">Fred</td>
            <td class="salary-col">$12000.00</td>
        </tr> 
        <tr>
            <td class="name-col">Kevin</td>
            <td class="salary-col">$191200.00</td>
        </tr> 
    </table>
</html>​

ヘッダー Name とその列のすべてのセルを class でゲームしname-col、Salary ヘッダーと cell で classをゲームしたことに注意してくださいsalary-col。

次に、JQuery を使用してname-col ヘッダーにクリック リスナーを追加し、name-col セルの並べ替え関数をトリガーしました。

$('th.name-col').click(function() {
    $('td.name-col').sortElements(function(a, b){
        return $(a).text() > $(b).text() ? 1 : -1;
    }, function(){ return this.parentNode; });
});

$('th.salary-col').click(function() {
    $('td.salary-col').sortElements(function(a, b){
        return $(a).text() > $(b).text() ? 1 : -1;
    }, function(){ return this.parentNode; });
});

この例でsortElementsは、上でリンクした単純な JQuery ソート関数で提供される関数です。私はそれの作者ではありません。

ただし、コンパレータの方向 ( >) がハードコーディングされているため、このスクリプトは一度しか並べ替えないことに気付くでしょう。この並べ替えを逆にするロジックを実装する簡単な方法の 1 つを次に示します。

var nameAsc = false;
var salaryAsc = false;

$('th.name-col').click(function() {
    $('td.name-col').sortElements(function(a, b){
        if (nameAsc) {
            nameAsc = false;
            return $(a).text() > $(b).text() ? 1 : -1;
        } else {
            nameAsc = true;
            return $(a).text() < $(b).text() ? 1 : -1;
        }
    }, function(){ return this.parentNode; });
});

$('th.salary-col').click(function() {
    $('td.salary-col').sortElements(function(a, b){
        if(salaryAsc) {
            salaryAsc = false;
            return $(a).text() > $(b).text() ? 1 : -1;
        } else {
            salaryAsc = true;
            return $(a).text() < $(b).text() ? 1 : -1;
        }
    }, function(){ return this.parentNode; });
});

ここでnameAsc、salaryAscブール変数は、並べ替え順序を逆にするためのハックな方法です。昇順の場合、ブール値と>コンパレータ関数の方向を反転します。これを行うにはおそらくもっと効率的な方法がありますが、私は簡単な例を挙げただけです。

2 テーブル モデルでは、特に列のサイズ設定に関して多くの問題が発生します。データ テーブルのセルに長いデータがある場合、データ列はヘッダー列と整列しなくなります。ヘッダーとデータの両方に 1 つのテーブルのみを使用することを強くお勧めします。

于 2012-09-24T22:11:40.490 に答える
0

並べ替えに sorttable.js を使用すると、並べ替えのために列見出しをクリックしているときに列の配置に問題が発生する可能性があります....

<script type="text/javascript" src="http://community.wikidot.com/local--files/howto:sortable-tables-js/sorttable.js"></script>

<style>
        th, td{
            padding: 3px;//important
        }
</style>
<table class="sortable">
<tr><th>...</th></tr><tr><td>...</td</tr>
</table>
于 2015-01-01T07:18:36.747 に答える