javascript - javascript のソート要素

Question

重複の可能性:
HTML 要素の JavaScript ソート

この形式の要素のリストを並べ替える必要があります

<table width='a number' bord ...>
  <tbody>
    <tr>
      header data
    </tr>
    <tr>
      <td style='asdasdas' class='asdasdasd' ...>
        rob
      </td
      <td style='asdasdas' class='asdasdasd' ...>
        mike
      </td>
    </tr>
    <tr>
      <td style='asdasdas' class='asdasdasd' ...>
        chuck
      </td>
      <td style='asdasdas' class='asdasdasd' ...>
        kev
      </td>
    </tr>
  </tbody>

人々が名前をアルファベット順に並べられるように、リストを並べ替えられるようにする必要があります。これを行う方法がわかりません

score 3 · Accepted Answer

タグ付けされた要素の任意のセットをソートする単純な JavaScript 関数を次に示します。

function sortElements(parentId, tagClass) {
    var itemsToSort, p = document.getElementById(parentId);
    if (p.getElementsByClassName) {
        itemsToSort = p.getElementsByClassName(tagClass);
    } else {
        itemsToSort = getElementsByClassName(tagClass, "*", p);
    }
    // get all data into a sortable array
    var data = [], order = [], item, placeHolder, i;
    for (i = 0; i < itemsToSort.length; i++) {
        item = itemsToSort[i];
        // save position of item by inserting a placeholder right before it
        placeHolder = document.createElement(item.tagName);
        item.parentNode.insertBefore(placeHolder, item);
        order.push(placeHolder);
        // save item and text
        data.push({obj: item, text: strTrim(item.innerHTML)});
    }
    // sort the item array by the text
    data.sort(function(a, b) {
        return(a.text.localeCompare(b.text));
    });
    // now reinsert items in sorted order
    for (i = 0; i < data.length; i++) {
        item = data[i].obj;
        placeHolder = order[i];
        // insert in new location
        placeHolder.parentNode.insertBefore(item, placeHolder);
        // remove placeholder
        placeHolder.parentNode.removeChild(placeHolder);
    }
}

function strTrim(str) {
    return(str.replace(/^\s+/, "").replace(/\s+$/, ""));
}

// replacement for older versions of IE
function getElementsByClassName(className, tag, elm){
    var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
    var tag = tag || "*";
    var elm = elm || document;
    var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
    var returnElements = [];
    var current;
    var length = elements.length;
    for(var i=0; i<length; i++){
        current = elements[i];
        if(testClass.test(current.className)){
            returnElements.push(current);
        }
    }
    return returnElements;
}

http://jsfiddle.net/jfriend00/EztNw/で動作を確認できます。このデモでは、関数が要素の任意のセットで機能することを示すために、OP のテーブルセルと順序付きリストを並べ替えることを示しています。

私が認識している唯一の制限は、タグ付き要素を他のタグ付き要素の子にすることはできないということです。テーブル内のセルに適しています。

これも使用するgetElementsByClassName()ため、古いバージョンの IE が必要な場合は、その代替/シムが追加されます (これは jsFiddle に含まれています)。

これがどのように機能するかは次のとおりです。

並べ替えたいすべてのオブジェクトのリストを取得する
各項目が現在配置されている場所に一時的なプレースホルダーオブジェクトを配置して、ソートされた順序で元に戻す場所がわかるようにします
並べ替えるオブジェクトの配列と並べ替えキー (この場合はテキスト) を作成します。
その配列をソートする
プレースホルダーを使用して、ソートされたオブジェクトを現在ソートされている順序で再挿入します。スロットが使用された後、プレースホルダーを削除します。

</p>

score 2 · Accepted Answer

簡単な方法：

名前を JS 配列にロードする
JS配列を並べ替える
配列からテーブルを生成して挿入する

score 1 · Accepted Answer

Javascriptだけでこれをすべてやりたいと仮定すると

    var names = ["rob", "mike", "chuck", "kev" };

    names.sort(); //gives you an array with [chuck, kev, mike, rob]

オブジェクトとしてのテーブル

    var table = "<table width='a number' bord ...>" +
                   "<tbody>" +
                      "<tr>" +
                        "header data" +
                      "</tr>"
                      "<tr>" +
                        "<td style='asdasdas' class='asdasdasd' ...>" +
                          names[0] +
                        "</td>" +
                        "<td style='asdasdas' class='asdasdasd' ...>" +
                           names[1] +
                        "</td>" +
                      "</tr>" +
                      "<tr>" +
                        "<td style='asdasdas' class='asdasdasd' ...>" +
                          names[2] +
                        "</td>" +
                        "<td style='asdasdas' class='asdasdasd' ...>" +
                          names[3] +
                        "</td>" +
                      "</tr>" +
                    "</tbody>";

必要な場所にテーブルオブジェクトを挿入します。プラグインは肥大化する可能性があり、このような単純なものにはおそらくやり過ぎでしょう。ただし、オプションがある場合は、クライアントではなくサーバー側で実行することをお勧めします。これにより、クロスブラウザーのサポートが不要になり、光沢のある新しいアルファベット順に並べ替えられたテーブルをユーザーが無効にできないようになります。

score -1 · Accepted Answer

jQueryを使用してソリューションも実装しました。見てみましょう：

HTML:

<table id="dataTable">
  <tbody>
    <tr>
      <td class="firstName">
        foo
      </td>
      <td class="lastName">
        bar
      </td>
    </tr>
    <tr>
      <td class="firstName">
        rob
      </td>
      <td class="lastName">
        mike
      </td>
    </tr>
    <tr>
      <td class="firstName">
        chuck
      </td>
      <td class="lastName">
        norris
      </td>
    </tr>
  </tbody>
</table>

<input id="sortByFirstName" type="button" value="Sort By First Name"/>
<br/>
<input id="sortByLastName" type="button" value="Sort By Last Name"/>

JavaScript:

function sortByCellValue( tableId, sortBy ) {

    var rows = $( "#" + tableId + " tbody tr" );
    var structuredRows = [];

    // extract all row data
    rows.each(function( index, item ) {

        var data = $(item).children().filter("td[class='" + sortBy + "']").html().trim();

        structuredRows.push({
            useToSort: data,
            row: item
        });

    });

    // sorting the rows
    structuredRows.sort(function( a, b ){

        var va = a.useToSort;
        var vb = b.useToSort;

        if ( va < vb ) {
            return -1;
        } else if ( va > vb ) {
            return 1;
        } else {
            return 0;
        }

    });

    // cleaning the tbody and inserting the rows in order
    var tBody = $( "#" + tableId + " tbody" );
    tBody.html( "" );

    for ( var i in structuredRows ) {
        tBody.append( structuredRows[i].row );
    }    

}

$(function(){
    $( "#sortByFirstName" ).click( function(){
        sortByCellValue( "dataTable", "firstName" );
    });

    $( "#sortByLastName" ).click( function(){
        sortByCellValue( "dataTable", "lastName" );
    });
});

jsFiddle はここで見ることができます: http://jsfiddle.net/UTTz8/

score -2 · Accepted Answer

あなたがやろうとしていることに利用できるプラグインがあるので、私はこれを手動でやりたくありません。それらのいくつかは、適切に機能し、適切にサポートされていることが証明されています。私はちょうどこれを使用します

javascript - javascript のソート要素

5 に答える 5

Related

Reference