引用
C#
C#經驗技巧寶典代碼的259頁實現查看0458光碟片11\EX11_15 DataList控制項中的資料詳細資料。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <style> table { border:0;border-collapse:collapse;} td { font:normal 12px/17px Arial;padding:2px;width:100px;} th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;width:100px;} .parent { background:#FFF38F;cursor:pointer;} /* 偶數行樣式*/ .odd { background:#FFFFEE;} /* 奇數行樣式*/ .selected { background:#FF6500;color:#fff;} </style> <!-- 引入jQuery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('tr.parent').click(function(){ // 擷取所謂的父行 $(this) .toggleClass("selected") // 添加/刪除高亮 .siblings('.child_'+this.id).toggle(); // 隱藏/顯示所謂的子行 }).click(); }) </script> </head> <body> <table> <thead> <tr><th>姓名</th><th>性別</th><th>暫住地</th></tr> </thead> <tbody> <tr class="parent" id="row_01"><td colspan="3">前台設計組</td></tr> <tr class="child_row_01"><td>張山</td><td>男</td><td>浙江寧波</td></tr> <tr class="child_row_01"><td>李四</td><td>女</td><td>浙江杭州</td></tr> <tr class="parent" id="row_02"><td colspan="3">前台開發組</td></tr> <tr class="child_row_02"><td>王五</td><td>男</td><td>湖南長沙</td></tr> <tr class="child_row_02"><td>找六</td><td>男</td><td>浙江溫州</td></tr> <tr class="parent" id="row_03"><td colspan="3">後台開發組</td></tr> <tr class="child_row_03"><td>Rain</td><td>男</td><td>浙江杭州</td></tr> <tr class="child_row_03"><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr> </tbody> </table> </body> </html>
通過此例子，想像asp.net中的Repeater做成展開伸縮的功能,想要點擊每行展開伸縮當前行的詳細資料，則必需通過每行的不同class或者ID來區別，那麼在表格產生的時候，就要產生不同的class或者ID
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script> $(document).ready(function () { $("tr").click(function () { // 擷取所謂的父行 $("#pp" + this.id).toggle(1000); // .toggleClass("selected") // 添加/刪除高亮 // alert(this.id); // .siblings("#pp" + this.id).toggle(); // 隱藏/顯示所謂的子行 // }).click(); }); });</script> </head><body> <form id="form1" runat="server"> <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1"> <HeaderTemplate><table border="1" width="100%"><tr><th>orderno</th><th>product_no</th><th>color</th><th>product_size</th><th>product_class</th></tr></HeaderTemplate><ItemTemplate><p><tr id="<%#Eval("orderno") %>"><td><table><tr><td><p id="ppp">★</p></td><td><%#Eval("orderno")%></td></tr></table></td><td><%#Eval("product_no")%></td><td><%#Eval("color")%></td><td><%#Eval("product_size")%></td><td><%#Eval("product_class")%></td></tr><tr id="pp<%#Eval("orderno") %>"><td colspan="5"><%#Eval("brand") %></td></tr></p></ItemTemplate><FooterTemplate></table></FooterTemplate> </asp:Repeater> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:shopConnectionString %>" SelectCommand="SELECT top 50 [orderno], [out_trade_no], [product_class], [brand], [product_no], [product_size], [color], [number], [price], [isems] FROM [tbl_order] order by id desc "> </asp:SqlDataSource> <br /> <asp:Button ID="Button4" runat="server" Text="Button" /> </form></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
