Slideup table 一次一行

Question

谁能告诉我如何一次向上滑动一行？我一直在搜索代码，一次向上滑动所有行，但我不明白我是如何使用 for 循环的，但它只滑动第一行，但直到我 [=25 的最后一行才继续向上滑动=]...

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

如果所有 tr 在由 mysql 创建的 table 中向上滑动，请查看每 3 秒停止工作的代码 .. 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);

 });

Slideup table 一次一行

Slideup table row one at a time

javascript

jquery

html-table

rows

slideup