万能js实现翻页，动态生成内容自动翻页，兼容各种浏览器（已测试）----神器版！

转--http://www.2cto.com/kf/201402/277535.html

2014-02-11 0个评论来源：卡布洛技术专栏

我要投稿

要求：动态输入内容，点击post生成内容条，实现自动翻页！

废话不多说，直接上代码：

js代码：

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>

<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>

</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实现翻页，动态生成内容自动翻页，兼容各种浏览器（已测试）----神器版！

相关文章