标签：
要求：动态输入内容，点击post生成内容条，实现自动翻页！
废话不多说，直接上代码：
js代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
var date=new Date();var myDate=date.getDate()+"/"+(date.getMonth()+1)+"/"+date.getFullYear();var arr=new Array();var pagesize=8;var curpage=0;var id=0;var ind=0;function getContent(){ var getMind=document.getElementById("mindBox").value.replace(/(^\s*)|(\s*$)/g,""); var getMoods=document.getElementsByName("Answer"); var flag=false; var getMood="" for(var i=0; i<getmoods.length; i++)="" {="" if(getmoods[i].checked){="" flag="true;" ind="i;" }="" if(ind="=0){getMood="1.png"}else" if(getmind="=""){alert("Please" write="" your="" mind="" !");="" return="" false;}="" else="" if(!flag){alert("please="" choose="" mood="" arr[arr.length]="[myDate,getMood,getMind,id];//将获取的数据放入多维数组中" id++;="" function="" checktable(){="" var="" arry_return="new" array();="" start_t;="" end_t;="" start="curpage*pagesize;" if(pagesize+start=arr.length&&start<=arr.length){ start_t = start; end_t=arr.length; for(var i=0; i<(arr.length-start_t); i++){ arry_return.push(arr[i]); } } else if(start>arr.length){ return arry_return; } return arry_return;//将筛选后的数据放到新的数组中}function showTable(array){//将数据循环展示在页面中 var tbodyBox=document.getElementById("tb"); var t=tbodyBox.childNodes; for(var m=t.length-1; m>=0; m--){ tbodyBox.removeChild(t[m]); } for(var i=array.length-1;i>=0;i--){ var row=document.createElement("tr"); var cellDate=document.createElement("td"); cellDate.appendChild(document.createTextNode(array[i][0])); var cellMood=document.createElement("td"); var img=document.createElement("img"); img.setAttribute("src",array[i][1]); cellMood.appendChild(img); //cellMood.appendChild(document.createTextNode(array[i][1])); var cellMind=document.createElement("td"); cellMind.appendChild(document.createTextNode(array[i][2])); var cellDelete=document.createElement("td"); var inp=document.createElement("input"); inp.setAttribute("type","button"); inp.setAttribute("value","delete"); inp.setAttribute("id",array[i][3]); inp.setAttribute("onclick","del(this)"); cellDelete.appendChild(inp); row.appendChild (cellDate); row.appendChild(cellMood); row.appendChild(cellMind); row.appendChild(cellDelete); tbodyBox.appendChild(row); }}function submitMind(){//input提交 getContent(); showTable(checkTable()); document.getElementById("pagecount").innerHTML=arr.length; document.getElementById("pagenum").innerHTML=Math.ceil(arr.length/pagesize);}function PerPage(){//上一页 (curpage<1)?curpage=0:curpage--; showTable(checkTable());}function NextPage(){//下一页 var pagecount=Math.ceil(arr.length/pagesize); (curpage<(pagecount-1))?curpage++:document.getElementById("pageDown").disabled="true"; showTable(checkTable());}function del(temp){//删除某条特定的数据 var getID=temp.id; for(var i=0; i<br>css代码：<p></p><p></p><pre class="brush:java;">.container{text-align:center;}.tit{font-size:24px;}table{width:100%; border:none;}tr,td{text-align:center;}.tableContent{width:850px; margin:0 auto;}</pre><br>html代码：<p></p><p></p><pre class="brush:java;"><div class="container"> <h1>My Micro Blog</h1> <span class="tit">What‘s in my mind:</span> <input type="text" id="mindBox" size="100" maxlength="400"> <br> <br> <span class="tit">Today‘s mood:</span> <input type="radio" name="Answer" value="1"> Over the moon <input type="radio" name="Answer" value="2"> Happy <input type="radio" name="Answer" value="3"> Sad <input type="submit" value="Post" onclick="submitMind()"> <br> <div class="tableContent"> <table id="tableBox"> <tbody><tr> <th>Date</th> <th>Mood</th> <th>What‘s in my mind</th> <th>Delete</th> </tr> </tbody><tbody id="tb"></tbody> <tbody><tr> <td colspan="4" style=" background:#DDF4F6; line-height:32px;"><span class="fan" style="padding:0;"> <span id="pageUp" style="cursor:pointer;" onclick="PerPage()">prev</span> <span id="pageDown" style="cursor:pointer;" onclick="NextPage()">next</span> <span>共 <span id="pagenum">1</span>页 <span id="pagecount">0</span>条</span> </span></td> </tr></tbody></table></div></div></pre><p></p><p>效果图如下：</p><p><img src="http://www.2cto.com/uploadfile/Collfiles/20140211/2014021108532459.jpg" alt="" http:="" www.2cto.com="" soft"="" target="_blank" class="keylink" style="width: 630px; height: 342.43660418963617px;">下载下来就能用哟，不用积分的！</p><p>http://download.csdn.net/download/u010480479/6910785<br></p><p>如果有任何指教和交流，请加QQ：1740437。</p><p><br></p><p><br></p> </arr.length;></getmoods.length;> |
万能js实现翻页，动态生成内容自动翻页，兼容各种浏览器（已测试）----神器版！
标签：
原文地址：http://www.cnblogs.com/anruy/p/5086480.html
我要投稿
