CODEWITHSUNDEEP
jquery
MShack
MShack

Reputation: 652

how do i update table row content while also reordering the table row

How can i refresh the all table row or the entire table , and on each refresh i have to reorder the table row content to search for td class = points, and have the table rows displayed from highest to lowest sum depending on value of td.points ?

I'm so confused on what to do here. New to using jQuery and really out of my element , so appreciate it.

<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>

Upvotes: 0

Views: 38

Answers (1)

The Process
The Process

Reputation: 5953

Here is the code:

$(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

Test it with multiple values.

Change the second argument in setInterval(arrangeRows,1000); to any number of ms you want this function tu be called. 5minutes (300*1000) ms

Upvotes: 1

Related Questions