Question

我有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和opera中我看不到任何变化......但为什么呢？如何对html表进行跨浏览器排序？也不要说我使用tableorter，为什么你有这么多tbodie等...

Answer 1

我按照以下方式在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();
    });
});

参见 updated fiddle

Answer 2

工作：

Chrome 22
Firefox 11
Opera 9.64
Internet Explorer 9

更新了小提琴：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();
    });
});

Jquery html表在不同的浏览器中排序

2 个答案: