Слайд-таблица строк по одному за раз

Question

Может ли кто-нибудь сказать мне, как перемещать строки по одному? Я искал коды для слайд-шоу всей строки один раз, но я не могу понять, как я использовал цикл for, но он только сдвигал первую строку, но не продолжал скользить до последней строки моей таблицы. .

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'); } 

Answer 1

здесь увидеть код каждые 3 второй остановки работы, если все ТР скользят в таблице, которая созданной MySQL .. jsfiddle

HTML код

<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 код:

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

});