如何在重新排序表行的同时更新表行内容

时间:2016-02-16 23:54:55

标签: jquery

如何刷新所有表行或整个表,并且在每次刷新时我必须重新排序表行内容以搜索td class = points,并根据值从最高到最低总和显示表行td.points?

我对这里要做的事情感到很困惑。使用jQuery和我的元素的新手,所以欣赏它。

<table class="homepagemodule report" id="livescoring_summary" align="center" cellspacing="1">
   <caption><span>Live Scoring</span></caption>
   <tbody>
      <tr>
         <th colspan="3"><a>Week 1</a></th>
      </tr>
      <tr class="oddtablerow">
         <td>Gridiron Grunts</td>
         <td class="points" id="fid_00011">87.03</td>
         <td><a>Details</a></td>
      </tr>
      <tr class="eventablerow">
         <td>LDSDEMOTEAM</td>
         <td class="points" id="fid_00021">58.10</td>
         <td><a>Details</a></td>
      </tr>
      <tr class="oddtablerow">
         <td>Franchise 3</td>
         <td class="points" id="fid_00031">74.050</td>
         <td><a>Details</a></td>
      </tr>
      <tr class="eventablerow">
         <td>LDSDEMOTEAM</td>
         <td class="points" id="fid_00021">123.02</td>
         <td><a>Details</a></td>
      </tr>
   </tbody>
</table>

1 个答案:

答案 0 :(得分:1)

以下是代码:

$(document).ready(function(){


  function arrangeRows(){


var tableBody=$("#livescoring_summary").find('tbody');

var tableRows=$("#livescoring_summary").find('tr').not(':first-child'); 

var res=[];

tableRows.each(function(){ 
  res.push($(this));

});  

res.sort(function(row1, row2) {
 return parseInt(row1.find('.points').html()) -   parseInt(row2.find('.points').html());
});

for(i=res.length-1; i>=0; i--){  

  $(res[i]).appendTo(tableBody);    

}


  }


  setInterval(arrangeRows,1000);



});

Fiddle Example

使用多个值进行测试。

setInterval(arrangeRows,1000);中的第二个参数更改为您希望调用此函数的任意数量的ms。 5分钟(300 * 1000)ms