Slideup table row one at a time

Can someone tell me how to slideup the rows one at a time? I've been searching the codes to slideup all row one a time but I cant understand how, I used the for loop, but it only slide the first row but it didn't continue to slideup until the last row of my table...

HTML

<table id='phoenix' border='0' cellpadding='0'>
    <tr style='background-color:lightgray;'>
        <th colspan='3' style='font-weight:bold;'>PHOENIX BOOKS</th>
            <tr>
            <tr>
                <th style='position:relative;width:20%;'>Item Code</th>
                <th style='position:relative;width:45%;'>Description</th>
                <th style='position:relative;width:20%;'>Stocks</th>
            </tr>
            <?php
                $serverName="PPHSQL01";
                $conInfo=array("Database"=>"Perks","UID"=>"sa","PWD"=>"asdasd");
                $con= sqlsrv_connect($serverName,$conInfo);

                $sql= sqlsrv_query($con,"Select A.WarehouseID,A.TitleID,A.CurrentBalance,B.TitleID,B.TitleCode,B.Title from dbo.vw_StocksBalances as A inner join dbo.Title as B on A.TitleID=B.TitleID where A.WarehouseID='5' ORDER BY A.CurrentBalance DESC");
                while($row=sqlsrv_fetch_array($sql))
                {
                    echo"<tr style='border-top:1px solid lightgray;'>";
                            echo"<td style='text-align:center;'>" .$row['TitleCode']. "</td>";
                            echo"<td>" .$row['Title']. "</td>";
                            echo"<td style='text-align:center;'>" .$row['CurrentBalance']. "</td>";
                    echo"</tr>";
                }
            ?>
</table>

Javascript

var ros=$("table tr").length(); var i; for(i=0;i=ros;i++) { $("table tr:first").slideUp('slow'); }

here see code of every 3 second stop work if all tr are slide up in table which created by mysql .. jsfiddle

HTML code

<table style="width:100%">
  <tr>
  <td>Jill</td>
  <td>Smith</td> 
  <td>50</td>
 </tr>
<tr>
<td>Eve</td>
<td>Jackson</td> 
<td>94</td>
</tr>
<tr>
<td>Eve3</td>
<td>Jackson</td> 
<td>94</td>
</tr>
<tr>
<td>Eve4</td>
<td>Jackson</td> 
<td>94</td>
</tr>
 <tr>
 <td>Eve5</td>
 <td>Jackson</td> 
 <td>94</td>
 </tr>
  <tr>
  <td>Eve6</td>
  <td>Jackson</td> 
  <td>94</td>
 </tr>
  <tr>
   <td>Eve7</td>
   <td>Jackson</td> 
  <td>94</td>
  </tr>
  <tr>
    <td>Eve8</td>
     <td>Jackson</td> 
    <td>94</td>
   </tr>
 </table>

jquery code:

 $(document).ready(function(){
   var counter = 2; 
   var length = ($('table tr').length)
    var timer =  setInterval(function(){
    if( length === counter){
      clearInterval(timer);
    }
    console.log(counter);  
    $('table tr:eq('+counter+')').slideUp(2000);
    counter++

    }, 3000);

 });