如何根据标题重新排序许多表?

时间:2018-08-20 08:45:49

标签: javascript jquery sorting tablesort

我想根据标题将许多表按字母顺序重新排序。

示例:

当前,我有:

  1. 标题为“ PHP”的表

  2. 标题为“ Javascript”的表

  3. 标题为“ Android”的表

我希望看到:

  1. 标题为“ Android”的表

  2. 标题为“ Javascript”的表

  3. 标题为“ PHP”的表

我不知道该怎么做。

这是我的代码:

$('table').each(function() {
    $caption = $(this).find('>caption');
    $table = $(this);
    $table.sort(function (a, b) {
        var $a = $(a),
        $b = $(b),
        aVal = $a.find(">caption").text().toLowerCase(),
        bVal = $a.find(">caption").text().toLowerCase();
        if (aVal < bVal) return -1;
        else if (aVal > bVal) return 1;
        else return 0;
    });
    $('#results').append($table);
});

1 个答案:

答案 0 :(得分:2)

在遍历表时无法对它们进行排序。

首先,您可以获取每个表的标题,然后将其与相应的表分组,然后将其压入数组。现在对数组进行排序并显示内容。

var tables = [];
$('table').each(function() {
    var caption = $(this).find('caption')[0];
    tables.push({
       'table' : $(this),
       'caption': $(caption).text().toLowerCase()
    });
});
tables.sort(function (tableA, tableB){
    if (tableA.caption < tableB.caption){
        return -1;
    }
    if (tableA.caption > tableB.caption){
        return 1;
    }
    return 0;
});

$.each( tables, function( index, tableObject){
    $('#results').append(tableObject.table);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table> <caption>Zhp</caption> </table>
<table> <caption>php</caption> </table> 
<table> <caption>Javascript</caption> </table>



<div id="results"></div>