0

テーブルをソートするためのhtmlとjqueryがあります（また、非標準のソート（マルチtbodyを使用）もあります）。

jQuery(function($) {
    var table = $('table');
    $(document).ready(function() {
        on_loaded($('.prcol'));
        $('.prcol').click(function(e) {
            on_loaded(this);
            e.preventDefault();
        });
    });

    function on_loaded(met) {
        var $sort = met;
        var $table = $('#articles-table');
        var $rows = $('tbody.analogs_art > tr', $table);
        $rows.sort(function(a, b) {
            var keyA = $('td:eq(3)', a).text().toUpperCase();;
            var keyB = $('td:eq(3)', b).text().toUpperCase();;

            if (keyA.length > 0 && isNaN(parseFloat($('td:eq(3)', b).text()))) return Ascending(keyA, keyB);
        });
        $.each($rows, function(index, row) {
            //console.log(row);
            $table.append(row);
            //$("table.123").append(row);
        });
    }

});


function Ascending(a, b) {
    if (a > b) return -1;
    if (a < b) return 1;
    return 0;
}

私のコードはここにあります: http://jsfiddle.net/hGCgX/2/

しかし、なぜ Webkit ブラウザーでのみソートされるのでしょうか? ff と ie とオペラでは、何も変わっていないように見えます... しかし、なぜですか? HTMLテーブルのクロスブラウザソートを行うには? また、テーブルソーターを使用するように言わないでください。なぜそんなに多くのtbodieなどがあるのですか...

4

2 に答える 2

0

私はそれをOperaで次のようにソートしました：

$(function(){
    var $table = $('#articles-table');
    var $tbody = $('tbody.analogs_art', $table);
    var $rows = $tbody.children("tr");

    function on_loaded() {
        Array.prototype.sort.call($rows, function(a, b) {
            var keyA = Number($('td', a).eq(3).text()) || 0;
            var keyB = Number($('td', b).eq(3).text()) || 0;
            return keyB - keyA;
        });
        $.each($rows, function(index, row) {
            $tbody.append(row);
        });
    };
    $table.find("th").eq(3).on('click', function() {
        on_loaded();
    });
});

更新されたフィドルを見る

于 2012-11-17T03:39:44.120 に答える
0

勤務先:

  • クロム 22
  • Firefox 11
  • オペラ 9.64
  • Internet Explorer9

更新されたフィドル: http://jsfiddle.net/hGCgX/4/

$(document).ready(function () {
    'use strict';
    var on_loaded = function on_loaded(col, css) {
            var rows = $('tbody.analogs_art > tr'),
                frag = $(document.createDocumentFragment()),
                trs = [];
            $.each(rows, function (index, row) {
                var tr = [],
                    val = '';
                if (row.children[col]) {
                    val = row.children[col].textContent;
                    row.children[col].className = css;
                }
                tr.push(val);
                tr.push(row);
                trs.push(tr);
            });
            if (css === 'ascending') {
                trs.sort();
            } else {
                trs.sort();
                trs.reverse();
            }
            $.each(trs, function (index, row) {
                frag.append(row[1]);
            });
            $('tbody.analogs_art').empty().append(frag);
        };
    $('#articles-table th').click(function (e) {
        var index = $('#articles-table th').index(this),
            direction = this.className === 'ascending' ? -1 : 1,
            css = direction > 0 ? 'ascending' : 'descending';
        $('#articles-table th, #articles-table td').removeClass('ascending').removeClass('descending');
        on_loaded(index, css);
        this.className = css;
        e.preventDefault();
    });
});
于 2012-11-17T20:19:01.083 に答える