作者 主題: [jQuery-plugin] Expand table rows  (閱讀 3329 次)

0 會員 與 1 訪客 正在閱讀本文。

hallohallo

  • 憂鬱的高中生
  • ***
  • 文章數: 134
    • 檢視個人資料
[jQuery-plugin] Expand table rows
« 於: 2010-10-13 10:53 »
小弟在測試Jexpand plugin (expand table rows) :
http://www.jankoatwarpspeed.com/examples/expandable-rows/


因為現在我可以按任何地方再行上它都可以隱藏和顯示,我希望可以修改隱藏和顯示行,當我只按下右邊的箭頭圖案

$("#report tr:odd").addClass("master");
$("#report tr:not(.master)").hide();
$("#report tr:first-child").show();
$("#report tr.master").click(function(){    
$(this).next("tr").toggle();    
$(this).find(".arrow").toggleClass("up");
});
« 上次編輯: 2010-10-13 12:38 由 hallohallo »

TyroneYeh

  • 俺是博士!
  • *****
  • 文章數: 2396
  • 性別: 男
    • 檢視個人資料
回覆: [jQuery-plugin] Expand table rows
« 回覆 #1 於: 2010-10-13 15:09 »
這樣可能可以?

代碼: [選擇]
$("#report tr:odd").addClass("master");
$("#report tr:not(.master)").hide();
$("#report tr:first-child").show();
$("#report tr.master").find('.arrow').click(function(){   
$(this).next("tr").toggle();   
$(this).find(".arrow").toggleClass("up");
});
--
TyroneYeh

hallohallo

  • 憂鬱的高中生
  • ***
  • 文章數: 134
    • 檢視個人資料
回覆: [jQuery-plugin] Expand table rows
« 回覆 #2 於: 2010-10-14 10:16 »

<script type="text/javascript"> 
      $(document).ready(function(){
      $("#report tr:odd").addClass("odd");
      $("#report tr:not(.odd)").hide();
      $("#report tr:first-child").show();
      
      $("#report tr.odd div.arrow").click(function(){
         $(this).parents('#report tr.odd').next("tr").toggle();
         $(this).find("div.arrow").toggleClass("up");
      });
      
   });
</script>