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

浏览数：34 / 时间：2015年06月09日

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

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

js代码：

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(ind==1){getMood="2.png"}else if(ind==2){getMood="3.png"}
	if(getMind==""){alert("Please write your mind !"); return false;}
	else if(!flag){alert("Please choose your mood !"); return false;}
	arr[arr.length]=[myDate,getMood,getMind,id];//将获取的数据放入多维数组中
	id++;
}
function checkTable(){
	var arry_return = new Array();
	var start_t;
	var end_t;
	var start=curpage*pagesize;
	if(pagesize+start<arr.length){
		start_t = start;
		end_t=pagesize+start;
		for(var i=arr.length-(end_t-start_t); i<arr.length; i++){
			arry_return.push(arr[i]);
		}
	}
	else 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<arr.length; i++){
		if(arr[i][3]==getID){
			arr.splice(i,1);
		}
	}
	showTable(checkTable());
	document.getElementById("pagecount").innerHTML=arr.length;
	document.getElementById("pagenum").innerHTML=Math.ceil(arr.length/pagesize);
}

css代码：

.container{text-align:center;}
.tit{font-size:24px;}
table{width:100%; border:none;}
tr,td{text-align:center;}
.tableContent{width:850px; margin:0 auto;}

html代码：

<body>
<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">
	<tr>
    	<th>Date</th>
        <th>Mood</th>
        <th>What‘s in my mind</th>
        <th>Delete</th>
    </tr>
    <tbody id="tb"></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>
</table>
</div>
</div>
</body>

效果图如下：