在客户端将一个大的HTML页面拆分为多个页面

split a big HTML page to pages on client side

本文关键字：HTML 拆分 一个 客户端      更新时间：2023-09-26

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

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

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

问题:在客户端，我想为这个巨大的页面做一个分页，所以只有3个字段集出现在客户端上的每个页面。我不想改变当前页面加载或表单提交的方式

这是一些小技巧，你可以使用

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

将返回字段

为了得到show only 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
}

如果在客户端完成分页，除了视觉效果(没有速度增加、负载减少等)之外，不会以任何方式真正帮助您，但是如果您想要这样做，您可以使用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
相关文章：