万能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;>

posted on 2015-12-29 17:32  anruy  阅读(2286)  评论(0)    收藏  举报

导航