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

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

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

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

收藏    我要投稿

要求：动态输入内容，点击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;>