Question

我将尝试尽可能地解释这一点，所以这里......

我有几个<tr>个标签，每个标签都有一个class =“one”或class =“two”等等。

这是代码。我通过jQuery将这个类添加到每个类中，因为我没有直接访问标记。

我想要做的是按类顺序重新排列完整的td标签及其所有内容。所以class =“1”td将是第一个，class =“2”秒，依此类推。有什么想法吗？

<tr class="4"> 
  <td align="center" rowspan="6"><img border="0" src="/v/vspfiles/assets/images/one.jpg" alt=""> 
   <a title="217/00004/00 Counterring" href="/217-00004-00-Counterring-p/217-fslash-00004-fslash-00.htm">
   <img border="0" alt="217/00004/00 Counterring" src="/v/vspfiles/photos/217-fslash-00004-fslash-00-0.jpg"></a> 
  </td> 
  <td rowspan="6"> 
   <img width="5" height="5" src="/v/vspfiles/templates/100/images/clear1x1.gif"> 
  </td> 
  <td background="/v/vspfiles/templates/100/images/Grid_Single_Divider_Vert.gif" rowspan="6"> 
    <img width="1" height="1" src="/v/vspfiles/templates/100/images/clear1x1.gif"> 
  </td> 
  <td rowspan="4"> 
  <img width="5" height="5" src="/v/vspfiles/templates/100/images/clear1x1.gif"> 
  </td> 
  <td colspan="9"><img width="5" height="5" src="/v/vspfiles/templates/100/images/clear1x1.gif"></td> 
</tr>

<tr class="3"> 
   <td align="center" rowspan="6"><img border="0" src="/v/vspfiles/assets/images/one.jpg" alt=""> 
<a title="217/00004/00 Counterring" href="/217-00004-00-Counterring-p/217-fslash-00004-fslash-00.htm">
<img border="0" alt="217/00004/00 Counterring" src="/v/vspfiles/photos/217-fslash-00004-fslash-00-0.jpg"></a> 
</td> 
<td rowspan="6"> 
<img width="5" height="5" src="/v/vspfiles/templates/100/images/clear1x1.gif"> 
</td> 
 <td background="/v/vspfiles/templates/100/images/Grid_Single_Divider_Vert.gif" rowspan="6"> 
 <img width="1" height="1" src="/v/vspfiles/templates/100/images/clear1x1.gif"> 
 </td> 
 <td rowspan="4"> 
 <img width="5" height="5" src="/v/vspfiles/templates/100/images/clear1x1.gif"> 
 </td> 
 <td colspan="9"><img width="5" height="5" src="/v/vspfiles/templates/100/images/clear1x1.gif"></td> 
 </tr>

 <tr class="1"> 
 <td align="center" rowspan="6"><img border="0" src="/v/vspfiles/assets/images/one.jpg" alt=""> 
 <a title="217/00004/00 Counterring" href="/217-00004-00-Counterring-p/217-fslash-00004-fslash-00.htm">
 <img border="0" alt="217/00004/00 Counterring" src="/v/vspfiles/photos/217-fslash-00004-fslash-00-0.jpg"></a> 
 </td> 
 <td rowspan="6"> 
 <img width="5" height="5" src="/v/vspfiles/templates/100/images/clear1x1.gif"> 
 </td> 
 <td background="/v/vspfiles/templates/100/images/Grid_Single_Divider_Vert.gif" rowspan="6"> 
<img width="1" height="1" src="/v/vspfiles/templates/100/images/clear1x1.gif"> 
</td> 
<td rowspan="4"> 
<img width="5" height="5" src="/v/vspfiles/templates/100/images/clear1x1.gif"> 
</td> 
<td colspan="9"><img width="5" height="5" src="/v/vspfiles/templates/100/images/clear1x1.gif"></td> 
</tr>

<tr class="2"> 
<td align="center" rowspan="6"><img border="0" src="/v/vspfiles/assets/images/one.jpg" alt=""> 
<a title="217/00004/00 Counterring" href="/217-00004-00-Counterring-p/217-fslash-00004-fslash-00.htm">
<img border="0" alt="217/00004/00 Counterring" src="/v/vspfiles/photos/217-fslash-00004-fslash-00-0.jpg"></a> 
</td> 
<td rowspan="6"> 
<img width="5" height="5" src="/v/vspfiles/templates/100/images/clear1x1.gif"> 
</td> 
<td background="/v/vspfiles/templates/100/images/Grid_Single_Divider_Vert.gif" rowspan="6"> 
<img width="1" height="1" src="/v/vspfiles/templates/100/images/clear1x1.gif"> 
</td> 
<td rowspan="4"> 
<img width="5" height="5" src="/v/vspfiles/templates/100/images/clear1x1.gif"> 
</td> 
<td colspan="9"><img width="5" height="5" src="/v/vspfiles/templates/100/images/clear1x1.gif"></td> 
</tr>

Answer 1

您可以使用<tr>函数获取所有get的数组，并使用本机sort函数对其进行排序。在这里我使用append，如果我只获得一个<table>，则会移动元素（否则，您希望使用each循环遍历表）：

var trs = $('tr');
var sorted = trs.get().sort(
    function(a,b){
        return $(a).attr('class') > $(b).attr('class');
            }
        );
$('table').append(sorted);

工作示例：http://jsfiddle.net/kobi/fJkcY/

Answer 2

我有点困惑，因为它似乎是具有数字类的<tr>元素，而不是<td>。

如果您的意思是<tr>，请尝试以下操作：

（这假设您的<table>的ID为myTable，tr元素的类名称以tr_开头。）

  var $tbody = $('#myTable > tbody');   // cache reference to the table's tbody
  var $trs = $tbody.find('tr'); // find the tr elements

  $trs.sort(function(a,b) {
       // Get the numeric portion of the class
    var class_a = a.className.slice( a.className.indexOf( '_' ) + 1 );
    var class_b = b.className.slice( b.className.indexOf( '_' ) + 1 );
    return class_a - class_b;
  });

  $tbody.append($trs);  // append the sorted tr elements

编辑：更改了它，以便它使用表格的<tbody>元素。确保您的标记具有<tbody>的一致性。

编辑：使用.get()获取DOM元素数组as @Kobi did in his answer可能更安全，因为sort列为in the source仅供内部使用，因此，您不能依赖它将来存在。

Answer 3

我使用jQuery表格排序器（http://tablesorter.com/docs/） - 你可以使用这个插件来完成你需要的东西，或者从阅读代码中学习。

另外，@ petersenDidit：您是否知道jQuery 1.4.3添加了对HTML5数据属性的支持，因此您可以使用data（）获取它们？它也进行类型转换。这可以使您提交（以后删除）的代码更清晰：

http://jsfiddle.net/hybernaut/P3EgG/2/

不要批评 - 这是我刚学会的东西，我以为你会喜欢。

Answer 4

使用element sorter插件，或参阅this question。

Answer 5

<强> [Working example]

(function(window){

// array functions are not working
// on nodeLists on IE, we need to
// to convert them to array
function toArray( obj ) {
  var i, arr = [];
  for ( i = obj.length; i--; ){
    arr[i] = obj[i];
  }
  return arr;
}

// custom compare function for sorting
// by the class
function sortByClass( a, b ) {
  if ( a.className < b.className ) return -1;
  else if( a.className > b.className ) return 1;
  else return 0;
}

window.sortElements = function(id, tag) {

  // select the elements to be ordered
  var root  = document.getElementById(id),
      items = root.getElementsByTagName(tag),
      len   = items.length;

  // convert to array, to make sorting possible
  items = toArray( items );

  // do the item sorting by their class
  items = items.sort( sortByClass );

  // append them back to the parent in order
  for ( var i = 0; i < len; i++ ) {
    root.appendChild( items[i] );
  }
};

})(this);

Answer 6

你可以通过遍历每个tr，分离子tds，将它们转换为数组，对它们进行排序，然后插回到tr中来实现这一点。

$("tr").each(function() {
    var tr = $(this);
    var tds = $("td",tr).detach().get();
    tds.sort(function(x,y) {
        var vx = parseInt($(x).attr("class"));
        var vy = parseInt($(y).attr("class"));
        return vx - vy;
    });
    tr.append($(tds))
})

按班级重新排列

6 个答案: