万能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="java;">.container{text-align:center;}
.tit{font-size:24px;}
table{100%; border:none;}
tr,td{text-align:center;}
.tableContent{850px; margin:0 auto;}</pre><br>
html代码：<p></p>
<p></p><pre class="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=" 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;>