The jquery scroll component (vticker. js) achieves the scrolling Effect of dynamic page data.

Copy codeThe Code is as follows:
<Script language = "javascript" src = "lirms/Test/jquery-1.4.2.js"> </script>
<Script language = "javascript" src = "lirms/Test/vticker. js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ (". Roll"). each (function (){
$ (This). vTicker ({
ShowItems: 18, // display the number of rows to scroll
Pause: 3000, // rolling Interval
Speed: 500, // scroll speed
Animation: "fade ",
MousePause: false,
Direction: "up", // scroll direction
});
});
});
</Script>

It seems that only the div-ul-li label nesting can implement the scrolling effect of multiple rows and multiple columns in the table (for any improvement, please advise !)
Copy codeThe Code is as follows:
<Div class = "conn">
<Table>
<Tr>
<Th style = "width: 50px;"> NO. </th>
<Th style = "width: 150px;"> name </th>
<Th style = "width: 80px;"> quarterly completion </th>
<Th style = "width: 50px;"> yesterday </th>
<Th style = "width: 70px;"> progress </th>
<Th style = "width: 80px;"> basic metrics </th>
<Th style = "width: 70px;"> challenge indicator </th>
</Tr>
<Tr>
<Td colspan = "7">
<Div class = "roll">
<Ul>
<C: forEach items = "$ {statislist}" var = "s" varStatus = "I">
<C: set var = "cs" value = ""> </c: set>
<C: set var = "index" value = ""> </c: set>
<C: if test = "$ {I. index <9}">
<C: set var = "index" value = "0"> </c: set>
</C: if>
<C: if test = "$ {I. index % 2 = 0}">
<C: set var = "cs" value = "background: # ebf6fd;"> </c: set>
</C: if>
<Li style = "height: 30px; width: 550px; line-height: 30px; $ {cs}">
<Div style = "width: 50px; text-align: center; float: left;" >$ {index }$ {I. count} </div>
<Div style = "width: 150px; text-align: center; float: left;" >$ {s. name} </div>
<Div style = "width: 80px; text-align: center; float: left;" >$ {s. number} </div>
<Div style = "width: 50px; text-align: center; float: left;" >$ {s. zuori} </div>
<Div style = "width: 70px; text-align: center; float: left;" >$ {s. wcjb} </div>
<Div style = "width: 80px; text-align: center; float: left;" >$ {s. jbzb} </div>
<Div style = "width: 70px; text-align: center; float: left;" >$ {s. tzzb} </div>
</Li>
</C: forEach>
</Ul>
</Div>
</Td>
</Tr>
</Table>
</Div>