Question

嗨我有波纹管代码我想根据类名对表行进行排序..每行包含两个类，一个是“sprint1”，第二个是“cls *”..我想对行进行排序在第二节课......提前谢谢

   <tr class="sprint1 cls5">

   <tr class="sprint1 cls4">

   <tr class="sprint1 cls3">

   <tr class="sprint1 cls1">

   <tr class="sprint1 cls2">

Answer 1

使用Array.sort对类进行排序，然后根据该行重新排序。

http://jsfiddle.net/jamietre/eyr4N/

    var i, 
        table = $('table'),
        rows = $('tr'),
        classes = [];

    // build an array from the 2nd item in the class list on each row

    rows.each(function(i, e) {
        classes.push(e.className.split(' ')[1]);
    });

    // sort the array

    classes.sort();

    // reorganize the rows by adding each one again to the table, in the order of the
    // sorted class list. ("Adding" it with jquery append will move it to the end).

    for (i = 0; i < classes.length; i++) {
        table.append(table.find('tr.' + classes[i]));
    }

Answer 2

您可以根据array名称制作class并替换tr元素。

var arr = [];
$('tr[class*="cls"]').each(function(i, v){
    var ind = this.className.slice(-1)
    arr[ind-1] = this.outerHTML
})    
$('table').html(arr.join(""))   
// or $('table tbody').html(arr.join(""))

FIDDLE

Answer 3

使用排序方法..

var x = $('tr'); // <-- get all tr 
x.sort(function(a,b) {
    // split class name at cls and get the number after to sort with
    return $(a).attr('class').split('cls')[1] - $(b).attr('class').split('cls')[1];
});
// remake the table with new sorted tr
$('table > tbody').html(x);

http://jsfiddle.net/UTXUY/1/

Answer 4

尝试使用jQuery.dataTables ...它提供了分页和排序选项包括这个

   <link href="css/demo_page.css" rel="stylesheet" id="stylesheet"/>
      <link href="css/demo_table.css" rel="stylesheet" />
     <script  src="js/jquery.dataTables.js"></script>

并声明表

      <table id="abc" class="display">
          ...
       </table>

jQuery调用：

        $('#abc').dataTable({

        "iDisplayLength": 5,

           });

如何使用类名对表行进行排序？

4 个答案: