JS数组分页显示(创建/删除链接列表)


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>JS数组分页显示(创建/删除链接列表)</title>
<base target="_blank" href="/sites/ui-blog/">


<style>li{line-height:30px;}</style>


<div id="divForList"></div>


<button onClick="__1500kmCOM(1)">1</button>
<button onClick="__1500kmCOM(2)">2</button>
<button onClick="__1500kmCOM(3)">3</button>
<button onClick="__1500kmCOM(4)">4</button>
<button onClick="__1500kmCOM(5)">5</button>

powered by 1500km.com
<!--<button onClick="__delNodes()">delNodes</button>-->

<script>


var dataList=
[
    ['6','php-access-block','PHP+ACCESS获取数据库中最后10条数据']
    ,['1','php-sqlite-block','PHP+SQLite读取数据库中前5条数据']
    ,['2','mdb-file','学习用ACCESS数据库文件test.mdb']
    ,['3','sqlite-file','学习用SQLite数据库文件test.db']
    ,['4','mysql-file','学习用MYSQL数据库文件test.sql']
    ,['5','php-sqlite-detail','PHP+SQLite读取数据库中ID等于2的数据详情']
    ,['7','asp-access-block-vb-ver','asp+access读取前6条记录(VB版)']
    ,['8','asp-access-block-js-ver','ASP+ACCESS查询含有“书”的数据(JS版)']
    ,['9','php-mysql-block','php+mysql读取指定记录']
    ,['10','php-json-array','(1)php解析json,(2)数组转成json']
    ,['11','jiantizi-to-array','PHP中把简体字符串拆开成单个汉字']
    ,['12','jiantizi','按A到Z字母顺序排好的3753个简体汉字']
    ,['13','jiantizi-array','把3753个简体汉字放在数组中']
    ,['14','rand-name','随机组合两个汉字']
    ,['15','yiweishu-jiafa','一位数加法题库大全PHP数组']
    ,['16','yiweishu-chengfa','一位数乘法题库大全PHP数组']
    ,['17','rand-yiweishu-jiafa','一位数加法随机出题机']
    ,['18','baijiaxing-array','504个百家姓,已经整理成PHP数组']
    ,['19','lifang','会自动将公分换算成小数的立方计算器']
    ,['20','rand-say','PHP程序中随机获取一句话:打乱数组次序,再取数组中第一条数据']
    ,['21','ajax-detail','php+sqlite+ajax获取id=1的数据']
    ,['22','ajax-list','php+sqlite+ajax从数据库获取列表']
    ,['23','simple-wuziqi','js+html5+canvas简单五子棋']
    ,['24','php-jquery-5-chess','五子棋实验室(php+jquery简单5子连珠)']
    ,['25','print_r-for-js','JS打印数组:(方法1)类似于PHP中的print_r(方法2)console.log']
    ,['26','php-jquery-6-zi-chong','六子冲棋实验室(php+jquery)在完善中...']
    ,['27','opener.document','JS在window.open中把子窗口参数,变量传递给父窗口']
    ,['28','js-class','js面向对象编程,模拟类class中的私有变量和私有函数']
    ,['29','js-records-array','js遍历二维数组']
    ,['30','js-arguments','用arguments实现js函数参数默认值']
    ,['31','js-toUpperCase','js自动转换大小写用toLowerCase和toUpperCase']
    ,['32','select-all-checkboxs','js复选框:全部选择,取消选择,反向选择']
    ,['33','ajax-click','php+sqlite+ajax给指定id的数据点赞']
    ,['34','js-height-weight','js计算体重和身高']
    ,['35','js-fangti-jianti','js简体转换为繁体字']
    ,['36','js-hanzi-loop','js遍历文本框中的汉字 ']
    ,['37','js-indexOf','JS中用indexOf查找数组中的汉字']
    ,['38','js-indexOf-array','js遍历array中的汉字']
    ,['39','easy-pinyin','js拼音输入法模型']
    ,['40','rand-pinyin','JS随机获取20个拼音']
    ,['41','shuffle-array','自定义shuffle打乱JS数组次序']
    ,['42','js-split','js字符串转换成数组,再按首字母检索拼音']
    ,['43','js-rand-str','js随机(数字/字母/混合)字符串']
    ,['44','web-to-fanti','js网页繁体简体转换']
    ,['45','js-select-fenlei','JS多级分类联动选择']
    ,['46','appendChild','JS动态添加删除或清空option选择项']
    ,['47','getElementsByTagName','JS替换指定DIV内部的链接名称和地址']
    ,['48','js-select-address','[新版本]JS三级分类联动选项']
    ,['49','js-search-while-input','JS输入实时匹配表格中数据']
    ,['50','js-check-input','JS表单失去焦点时输入提示(onblur和this实例)']
    ,['51','js-all-html-elements','JS遍历/获取当前页面中所有HTML元素']
    ,['52','web-to-fanti-simple','JS网页转换繁体(简化版)']
    ,['53','web-to-fanti-myself','JS遍历和修改html元素文字']
    ,['54','js-str-to-fanti','JS字符串替换为繁体']
    ,['55','js-cookie','js cookie添加,读取,删除']
];



__1500kmCOM(1);


//创建页面
function __1500kmCOM(i){
    __delNodes();
    createListx(dataList.slice(i,i+5));
}


//删除当前列表
function __delNodes(){
    var div=document.getElementById("divForList");
    var len=div.childNodes.length;
    //alert(len);
    for(var i=0;i<len;i++){
        div.removeChild(div.lastChild);
    }
}


//创建链接
function createListx(dataList){
    var node,li,url='',fileName,id;
    var div=document.getElementById("divForList");
    for(var i=0;i<dataList.length;i++){
        li=document.createElement("LI");
        node=document.createElement("A");
        url=("?id="+dataList[i][0]+"&f="+dataList[i][1]);
        node.setAttribute("href",url);
        node.innerHTML=dataList[i][2];
        div.appendChild(li);
        li.appendChild(node);
    }
}

</script>




程序运行结果如下,点击这里亲自运行看看