0

こんにちは、テーブル付きのhtml構造があります。値に従って td をソートしたい。私はそれを試していますが、それを実現するためのロジックを見つけることができません。私の機能は

<head>
<script type="text/javascript">
function sorting(){
    var sortvalue= document.getElementsByTagName('td');
    for(i=0; i<sortvalue.length;i++){
        var val= sortvalue[i].value
        }
    }


</script>

</head>

<body>

<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>5</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td>4</td>
  </tr>
    <tr>
    <td>1</td>
  </tr>


</table>

<a href="#" onclick="sorting()">click to sort</a>
</body>
4

6 に答える 6

1

スクリプトをリンクの下に置くか、domready に追加するとします。

function sorting(){

    var tbl = document.getElementsByTagName('table')[0];
    var store = [];
    for(var i=0, len=tbl.rows.length;i<len; i++){
        var row = tbl.rows[i];
        var sortnr = parseFloat(row.cells[0].textContent || row.cells[0].innerText);
        if(!isNaN(sortnr)) store.push([sortnr, row]);
    }
    store.sort(function(x,y){
        return x[0] - y[0];
    });
    for(var i=0, len=store.length; i<len; i++){
        tbl.appendChild(store[i][1]);
    }
    store = null;
}

リンクはこちら: http://jsfiddle.net/UMjDb/

于 2012-09-13T06:27:21.177 に答える
1

これらの数字を整理する以上のことを計画している場合: プラグインを使用する必要があると言っている人は正しいです。独自のテーブル ソーターを作成しようとすると、それ以上の労力が必要になります。

これらの数値を並べ替えるだけの場合 (小さいものから大きいものへ):

function sorting() {
    td = document.getElementsByTagName("td");
    sorted = [];
    for (x = 0; x < td.length; x++)
        sorted[x] = Number(td[x].innerHTML);
    sorted.sort();
    for (x = 0; x < sorted.length; x++) 
        td[x].innerHTML = sorted[x];
}

大きいものから小さいものへ:

function sorting() {
    td = document.getElementsByTagName("td");
    sorted = [];
    for (x = 0; x < td.length; x++)
        sorted[x] = Number(td[x].innerHTML);
    sorted.sort().reverse();
    for (x = 0; x < sorted.length; x++) 
        td[x].innerHTML = sorted[x];
}
于 2012-09-13T06:28:41.590 に答える
1

あなたの例では、ノード リストからセル データの配列を作成し、その配列を並べ替えてから、セル データを並べ替えられたデータに置き換えることができます。要素を移動するよりも簡単です。

<head>
<script type= "text/javascript">
function sorting(){
    var T= [], tds= document.getElementsByTagName('td');
    for(var i= 0;i<tds.length;i++){
        T.push(tds[i].firstChild.data);
    }
    T.sort(function(a, b){
        return a-b
    });
    for(var i= 0;i<tds.length;i++){
        tds[i].replaceChild(document.createTextNode(T[i]), tds[i].firstChild);
    }
}
</script>
</head>
<body>
<table width= "500" border= "0" cellspacing= "0" cellpadding= "0">
<tr>
<td>5</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>1</td>
</tr>
</table>
<a href= "#" onclick= "sorting()">click to sort</a>
</body>
于 2012-09-13T06:38:14.207 に答える
1

私はjqueryソリューションを提供しています。この投稿がお役に立てば幸いです。

var tdData = Array();
$(document).ready(function(){
    $('td').each(function(i){
   tdData [i] = $(this).text();
   });  
});

function sorting(){
   var sortedData = tdData.sort();
    $('td').each(function(i){
  $(this).text(sortedData[i]);
  } ); 
}

完全な解決策: リンク

于 2012-09-13T07:07:42.733 に答える
1

ステップ 1: すべての td を見つける
ステップ 2: それらの値を取得する
ステップ 3: それらの値でソートする
ステップ 4: それらを正しい順序で親に戻す。これは、 $(parent).html("").append(sortedNodes) を使用して簡単に実行できます (jQuery を使用している場合)。

@FelixKling が以下で指摘しているように、.html("")「ツリーに既に存在するノードがある場合は、.append最初にそれらを現在の場所から削除し、新しい親に追加する」ため、コードを明確にする以外は厳密には必要ありません。

于 2012-09-13T06:31:01.303 に答える
0

テーブルを再編成する必要があります。最も簡単な方法は、 jQuery用にこのようなプラグインを使用することです。

DOM を変更する必要があります。すべてのデータを取得し、すべての行を削除して正しい順序で追加し直すなど、その方法は異なります。デタッチと再アタッチ
を使用すると、改善される可能性があります。

于 2012-09-13T06:21:49.487 に答える