Создание динамической таблицы отображает ограниченные результаты с возможностью расширения - PullRequest
Новая
       14

Создание динамической таблицы отображает ограниченные результаты с возможностью расширения

1 голос
/ 13 октября 2011

У меня есть следующий 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>

Не должно иметь значения, что находится внутри ТР (я не думаю), поэтому я оставил все это без внимания. Этот блок кода состоит из 1 продукта: 

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

Так что в основном я хотел бы использовать jQuery для отображения только 4 из этих продуктов и иметь кнопку, чтобы развернуть / показать остальные из них. Я полностью сбит с толку и не знаю, с чего начать. Я пытался найти каждые 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 продукта». Как я могу отредактировать это, чтобы правильно отобразить этот текст?

Ответы [ 2 ]

1 голос
/ 13 октября 2011

вы забыли о </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 :)
});
0 голосов
/ 13 октября 2011 
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 для события готовности документа.

...