Динамическая подкачка с использованием divs и Javascript

Question

У меня есть цикл набора записей, который создает таблицу, и каждые 9 элементов он оборачивает div вокруг них, так что в основном выглядит так:

<div>
<table>rs1, rs2 ----> rs9</table>
</div>
<div>
<table>rs10, rs11 ----> rs18</table>
</div>

etc...

Теперь я хочу, чтобы сначала показывался только первый div, а остальные скрыты, но у меня есть петля ASP, которая генерирует кликабельные ссылки для различных div (страниц), и нажатие на любую ссылку дает показание div скрыть все остальные.

Вот код asp, который у меня есть:

Dim i
  If totalPages > 1 Then
    Response.Write("<div id='navigation'>")
  For i=1 to totalPages
      Response.Write ("<a href='' onlick=''>"& i &"</a> | ")
  Next
  Response.Write("</div>")
  End If

Теперь мне просто нужно разобраться с JavaScript ...

Answer 1

Чтобы сделать это проще, вы должны как-то идентифицировать свои таблицы. Дайте им идентификатор, который идентифицирует конкретный набор результатов, и имя класса, которое идентифицирует все наборы результатов:

<table id="resultset-1" class="resultset"> ...

Затем вы можете привязать событие к ссылкам в вашем элементе навигации:

window.onload = function() {
    document
        .getElementById('navigation')
        .getElementByTagName('a')
        .onclick = function() {
            var id = parseInt(this.innerHTML, 10);
            document.getElementsByClassName('resultset').style.display = 'none';
            document.getElementById('resultset-'+id).style.display = 'block';
            return false;
        }
}

Я не проверял это, и мои ванильные навыки JS немного ржавые, но это должно работать, насколько я понимаю. Просто для удовольствия, вот версия с использованием jQuery, которую я могу гарантировать:

$(function() {
    $('#navigation a').click(function() {
        var id = parseInt($(this).html(), 10);
        $('.resultset').hide();
        $('#resultset-'+id).show();
        return false;
    });
});

Не забудьте сначала как-нибудь скрыть все, кроме первого div & ndash; вам не нужно использовать JS для этого, вы можете использовать ASP для печати style="display: none;" во всех таблицах, которые вы хотите скрыть, например.