在tr之后用jquery排序表 [英] Sort table with jquery after some tr

问题描述

我有这样的html表格结构：

 < table cellpadding =0cellspasing =0class = tablesorter zebraid =articles-table> 
 
< tbody> ...等等标准的东西... 
< tr> 
< td> 
< / td> 
< / tr> 
然后我有
< tr id =123123> 
< td colspan =7> 
 Analogs 
< / td> 
< / tr> 
< tr id =prcol> 
< td> 
< td> 
< / td> 
< / td> 
< tr> 
 ... 
< / table> 
  

我试过这样的脚本：

<$ p $ （函数（$）{
var table = $（'table'）;
$（document）.ready（function（）{
$（ '#prcol'）
.each（function（）{
var th = $（this），
thIndex = th.index（），
inverse = false;
th.click（function（）{
table.find（'td'）。filter（function（）{
return $（this）.index（）=== thIndex; $ b $ （$ a $ b $）返回$ .text（[a]）> $ .text（[b]）？
inverse？-1：1
：inverse？1：-1;
}，function（）{
return this.parentNode;
}）;
inverse =！inverse;
}） ;
}）;
}）;
}）;

但主要的麻烦在于它正在排序所有...但我只需要那个，我的tr与 id 123123 并在页面加载时进行排序...

我需要通过我的浮点​​数，这是第二个唯一的！在TR与ID = 123，这是很重要的......我也看到所有的解决方案都是巨大的......我只需要简单的排序秒td在某些TR与特定的ID ...我怎样才能解决它？ p>

我试过了tablesorter.com。但它不是我的...不能自定义它只为一些tr ...另外我需要它是分拣，如果文档被加载。

此处尝试＃2：
链接

第一行还有麻烦...

解决方案

很难准确地告诉你想要什么您的英语，但这里是我想出的：

1. 查找所有表格。


2. 每个表格：
   
   
   
   1. 查找标记有类 prcol 的标题单元格。这是我们要排序的列。
   
   
   2. 查找标有<$ c $的所有 tbody 标签c> sortable class。
   
   
   3. 对于每个可排序的主体：
      
      
      
      1. 根据float值
         
      2. 用已排序的行替换旧行
      
      
      

   >
   

   为了做到这一点，我将以下内容放入jQuery的文档准备事件中：
   
   <$ p $（$）$ $ $ $ $ $ $ $ $ $（sortElem）.closest（'tr'）。children（））;
   var colSelector =td：eq（_n _）。replace（'_ n_'，index）;
   
   $（sortElem）.closest（'table'）。children（'tbody.sortable'）。each（function（tbIdx）{
   var rows = $（this）.children（'tr'）;
   rows.sort（function（left，right）{
   var leftText = $（colSelector，left）.text（）;
   var rightText = $（colSelector，right）.text（）;
   var leftValue = parseFloat（leftText）|| 10000;
   var rightValue = parseFloat（rightText）|| 10000;
   返回leftValue - rightValue;
   }）;
   $（this）.html（rows）;
   }）;
   }）;
   

   I 制作了一个小提琴 ，它显示了工作中的代码。我简化了桌子，以便更容易地看到发生了什么事情，并且我制作了第三个桌子主体未排序。

   
   

   I have such html table structure:

   <table cellpadding="0" cellspasing="0" class="tablesorter zebra" id="articles-table">
   
       <tbody>...etc standart stuff...
       <tr>
       <td>
       </td>
       </tr>
       then i have 
       <tr id="123123">
       <td colspan="7">
        Analogs
       </td>
       </tr>
       <tr id="prcol">
       <td>
       <td>
   </td>
   </td>
   <tr>
   ...
   </table> 
   

   I tried such script:

   jQuery(function($) {
   var table = $('table');
   $(document).ready(function () {    
       $('#prcol')
       .each(function(){        
           var th = $(this),
               thIndex = th.index(),
               inverse = false;        
           th.click(function(){            
               table.find('td').filter(function(){                
                   return $(this).index() === thIndex;                
               }).sortElements(function(a, b){                
                   return $.text([a]) > $.text([b]) ?
                       inverse ? -1 : 1
                       : inverse ? 1 : -1;                
               }, function(){
                   return this.parentNode; 
               });
               inverse = !inverse;                
           });            
       });
     });
   });
   

   But main trouble is that it is sorting all ... But i need only that, which go after my tr with id 123123 and sort when page is loaded...

   I need to sort via my float number, which is in second div only! in tr with id = 123, this is important... Also all solutions i see in web are to huge... I just need simple sort second td in some tr with specific id... How can i solve it?

   I tried tablesorter.com. but it is not my... Can't customize it only for some tr... Also i need it to be sorter if document is loaded.

   Also try#2 here: link

   with first row are troubles yet...

   解决方案

   It is hard to tell exactly what you wanted from your English, but here is what I came up with:

   1. Find all tables.
   2. For each table:
      1. Find the header cell marked with the class prcol. That is the column we want to sort by.
      2. Find all of the tbody tags in the table marked with the sortable class.
      3. For each sortable body:
         1. Sort the rows according to the float value of the sortable cell
         2. Replace the old rows with the sorted rows

   To make this work, I put the following into jQuery's document ready event:

   $("thead .prcol").each(function(thIdx, sortElem) {
       // find our column index
       var index = $.inArray(sortElem, $(sortElem).closest('tr').children());
       var colSelector = "td:eq(_n_)".replace('_n_', index);
   
       $(sortElem).closest('table').children('tbody.sortable').each(function(tbIdx) {
           var rows = $(this).children('tr');
           rows.sort(function(left, right) {
               var leftText = $(colSelector, left).text();
               var rightText = $(colSelector, right).text();
               var leftValue = parseFloat(leftText) || 10000;
               var rightValue = parseFloat(rightText) || 10000;
               return  leftValue - rightValue;
           });
           $(this).html(rows);
       });
   });​
   

   I made a fiddle that shows the code at work. I simplified the table a lot to make it easier to see what is happening, and I made the third table body unsorted.

   这篇关于在tr之后用jquery排序表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！