要求：动态输入内容，点击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>
效果图如下：
http://download.csdn.net/download/u010480479/6910785
如果有任何指教和交流，请加QQ：1740437。