製作一個動態表顯示的選項結果僅限於擴大

我有以下的HTML，我不能直接編輯，因爲它正在動態生成的：製作一個動態表顯示的選項結果僅限於擴大

<table class="v65-productDisplay" width="100%" cellspacing="0" cellpadding="0" border="0"> 
<tbody> 
<tr class="v65-productDisplay-row"> 
<tr class="v65-productDisplay-row"> 
<tr class="v65-productDisplay-row"> 
<tr> 
<tr class="v65-productDisplay-row"> 
<tr class="v65-productDisplay-row"> 
<tr class="v65-productDisplay-row"> 
<tr> 
<tr class="v65-productDisplay-row"> 
<tr class="v65-productDisplay-row"> 
<tr class="v65-productDisplay-row"> 
<tr> 
<tr class="v65-productDisplay-row"> 
<tr class="v65-productDisplay-row"> 
<tr class="v65-productDisplay-row"> 
<tr> 
<tr class="v65-productDisplay-row"> 
<tr class="v65-productDisplay-row"> 
<tr class="v65-productDisplay-row"> 
<tr> 
<tr class="v65-productDisplay-row"> 
<tr class="v65-productDisplay-row"> 
<tr class="v65-productDisplay-row"> 
<tr> 
<tr class="v65-productDisplay-row"> 
<tr class="v65-productDisplay-row"> 
<tr class="v65-productDisplay-row"> 
<tr> 
<tr class="v65-productDisplay-row"> 
<tr class="v65-productDisplay-row"> 
<tr class="v65-productDisplay-row"> 
<tr> 
<tr class="v65-productDisplay-row"> 
<tr class="v65-productDisplay-row"> 
<tr class="v65-productDisplay-row"> 
<tr> 
<tr class="v65-productDisplay-row"> 
<tr class="v65-productDisplay-row"> 
<tr class="v65-productDisplay-row"> 
<tr> 
</tbody> 
</table>

它不應該的問題有什麼TR內（我不認爲），所以我把所有這些東西都拿出來了。該代碼塊包括1種產品：

<tr class="v65-productDisplay-row"> 
<tr class="v65-productDisplay-row"> 
<tr class="v65-productDisplay-row"> 
<tr>

所以基本上我想使用jQuery這些產品中只有4上顯示，並具有按鈕以展開/顯示他們的其餘部分。我很困惑，不知道從哪裏開始。我試圖找到每個TR，將它們封裝在一個div中，然後試圖顯示/隱藏它們，但它搞砸了我的佈局，根本沒有工作。如果有人能幫助它，將不勝感激！

編輯：現在使用此：

<script type="text/javascript"> 
$(document).ready(function(){ 
var hiddenElements = $('.v65-productDisplay tr:gt(7)').hide(); 

if (hiddenElements.size() > 0) { 
    var showCaption = '<b>View </b>' + hiddenElements.size() + '<b> More Products</b>'; 
    $('.v65-productDisplay').append(
     $('<li id="toggler">' + showCaption + '</li>') 
      .toggle(
       function() { 
        hiddenElements.show(); 
        $(this).html('<b>Collapse</b>'); 
       }, 
       function() { 
        hiddenElements.hide(); 
        $(this).text(showCaption); 
       } 
     ) 
); 
} 
}); 
</script>

完美的作品除了在顯示文本「顯示x更多產品」，它是計算每個TR。所以不是說「1更多產品」，而是說「4更多產品」。我如何編輯這個以正確顯示文本？

來源

2011-10-12 user985952

你可以試試嗎？ – sbaaaang

請看我的帖子，我發現了一些工作，我只需要一個小編輯： – user985952

你忘了關於</tr>結束標籤我認爲這是導致佈局經紀。

然後如果你真的需要使用<table>我建議你把在第4 <tr>同一類我喜歡用像'<tr class="show">'那麼新類添加到其他<tr class="toggle">，創建一個<a id="toggle"></a>

在CSS文件添加tr.toggle{display:none;}

然後在JS做：

$('a#toggle').live('click',function(){ 
$('tr.toggle').slideToggle('slow');// you can try also toggle() instead of slideToggle(), i personally preferr slideToggle() ... as you wish :) 
});

來源

2011-10-12 23:14:49 sbaaaang

function hideProducts(numberToRemain){ 
    var rows = $('.v65-productDisplay tr'); 
    rows.hide(); 
    for(int i = 0; i < numberToRemain; i++){ 
     $(rows[i]).show(); 
    } 
} 
function showProducts(){ 
    $('.v65-productDisplay tr').show(); 
}

然後在文檔就緒事件中調用hideproducts。

來源

2011-10-12 23:16:11

製作一個動態表顯示的選項結果僅限於擴大

回答

相關問題