javascript - 使用多种排序对多个html表进行排序

Question

我的页面上有几个 html 表格，我希望能够根据其中一个单元格值的值对它们进行排序。这是我的表格的示例

<div id="tables">
    <table class="sortable">
        <tr>
            <td>Comic Book Name</td>
            <td id="comic">Batman</td>
        </tr>
        <tr>
            <td>Main Character</td >
            <td ="character">Bruce Wayne</td>
        </tr>
        <tr>
            <td>Hero Name</td>
            <td id="hero">Batman</td>
        </tr>
        <tr>
            <td>Published</td>
            <td id="publish">05/01/1940</td>
        </tr>
    </table>
    <table class="sortable">
        <tr>
            <td>Comic Book Name</td>
            <td id="comic">Green Arrow</td>
        </tr>
        <tr>
            <td>Main Character</td >
            <td ="character">Oliver Queen</td>
        </tr>
        <tr>
            <td>Hero Name</td>
            <td id="hero">Green Arrow</td>
        </tr>
        <tr>
            <td>Published</td>
            <td id="publish">11/01/1941</td>
        </tr>
    </table>
</div>

我提供了以下下拉列表以允许用户进行过滤。

<select id="OrderBy">
 <option selected="selected" value="comic">Comic Name</option>
 <option value="character">Character Name</option>
 <option value="hero">Hero Name</option>
 <option value="publish">Earliest Publish Date</option>
</select>

我的希望是当他们选择漫画名称时按漫画书名称的字母顺序对表格进行排序，当他们选择 Angular 色名称等时按 Angular 色名称的字母顺序排序

这是我到目前为止想出的 javascript/jquery。我确信这可以做得更好，但我是 Javascript 和 Jquery 的新手。

$('#OrderBy').on('change', function () {
    _order = $('#OrderBy').val();
    switch (_order) {
        case "comic":
            $('#sortable').sort(function () {

            });
            break;
        case "character":
            $('#sortable').children().sort(function (a, b) {
            });
            break;
        case "publish":
            $('#sortable').sort(function () {
            });
            break;
        case "publish":
            $('#sortable').sort(function () {
                if ($(b).children().find('#Hours').text() - $(a).children().find('#publish').text() <= 0) {
                    return $(a) - $(b);
                }
                return $(b) - $(a);
            });
            break;
    }
});

我到处都看到有人建议使用 Sorttables 或 tableSorter，但我只看到它们如何用于行正在排序的单个表。我知道此时每个人都在想什么，不要这样使用表格。我的问题是已经有一堆 jquery 和 javascript 支持这些表，而我在语言方面的经验不足，无法重写所有这些。

我喜欢将所有内容插入堆栈的想法，如 here 所述但我总是生成一个关于我的数组/堆栈未定义的错误。

Answer 1

首先，你不应该把同一个id放多次，而是用classes代替:

<div id="tables">

    <table class="sortable">
        <tr>
            <td>Comic Book Name</td>
            <td class="comic">Green Arrow</td>
        </tr>
        <tr>
            <td>Main Character</td >
            <td class="character">Oliver Queen</td>
        </tr>
        <tr>
            <td>Hero Name</td>
            <td class="hero">Green Arrow</td>
        </tr>
        <tr>
            <td>Published</td>
            <td class="publish">11/01/1941</td>
        </tr>
    </table>
    <table class="sortable">
        <tr>
            <td>Comic Book Name</td>
            <td class="comic">Batman</td>
        </tr>
        <tr>
            <td>Main Character</td >
            <td class="character">Bruce Wayne</td>
        </tr>
        <tr>
            <td>Hero Name</td>
            <td class="hero">Batman</td>
        </tr>
        <tr>
            <td>Published</td>
            <td class="publish">05/01/1940</td>
        </tr>
    </table>
</div>

对于你的问题，我会使用原生的 Array.prototype.sort 方法

var tables = [];
var $tables = $("table.sortable");
var container = $("#tables");
// this is the only specific case, as the date does not start by the year
// it will be used to sort by publish date
function sortByDate(a, b) {
    return new Date(a.publish).getTime() - new Date(b.publish).getTime();
}

function sortTables(order) {
    var sort;
    if (order === "publish") {
        tables = tables.sort(sortByDate);
    } else {
        tables = tables.sort(function(a, b) {
            return a[order] < b[order] ? -1 : 1;
        });
    }
    tables.forEach(function(data,i) {
        tables[i].$el.detach()
        container.append(tables[i].el);
    });
}

function init() {
    //populate the tables array that will be sorted
    $tables.each(function(i, val) {
        var $this = $(this);
        tables.push({
            $el: $this,
            el: this,
            comic: $this.find(".comic").text(),
            character: $this.find(".character").text(),
            hero: $this.find(".hero").text(),
            publish: $this.find(".publish").text()
        });
    });
    $("#OrderBy").on("change", function(event) {
        sortTables(event.currentTarget.value);
    });
    //by default sort by Hero
    sortTables("hero");
}
init();