javascript - 将大 HTML 页面拆分为客户端页面

Question

我有一个巨大的 HTML 页面，主要是一个表单，主要是这样的：

<FIELDSET id= '1'>
<TABLE>
  <TR> </TR>
</FIELDSET>
</TABLE>
   .
   .
   .
<FIELDSET id= 'n'>
<TABLE>
  <TR> </TR>
</TABLE>

字段集的数量是在服务器上动态生成的。

问题：在客户端，我想为这个大页面进行分页，这样客户端上的每页只显示 3 个字段集。我不想更改页面加载或当前提交表单的方式。

Answer 1

嗯，只是一些你可以使用的小技巧

$('fieldset')
document.querySelectorAll('fieldset')

将返回您的字段

为了只显示 i .. i+3 字段集，您可以使用

var i = 3

$('fieldset').hide().each(function ( index, el) {
   if (index >= i && index < i+3) $(el).show() 
})


var fieldsets = [].slice(document.querySelectorAll('fieldset'))


for (var index in fieldsets) {
    var display = index < i && index >= i+3 ? 'none' : ''
    fieldsets[index].style.display = display
}

Answer 2

如果在客户端完成分页（没有速度增加，负载减少等），分页除了视觉之外不会真正帮助您，但如果这是您想要的，您可以使用 DOM 操作来完成。以下内容可能对您有用：

    var i=0,sets=document.getElementsByTagName('fieldset'),len=sets.length;
    for(;i<len;i+=3) {
        // wrap sets[i] through sets[i+2], as long as they exist, in a div
        // if i !== 0, hide or minimize the div
    }
    // add controls to unhide/unminimize each div