當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
使用JS动态生成表格数据和分页显示
生活随笔
收集整理的這篇文章主要介紹了
使用JS动态生成表格数据和分页显示
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
根據(jù)錄入的內(nèi)容動態(tài)顯示到頁面，不需要通過數(shù)據(jù)庫保存，這樣子減輕服務(wù)器壓力。同時如果數(shù)據(jù)過多，支持分頁顯示，這些數(shù)據(jù)到保存時可以一起提交到后臺。
效果如下：
js代碼(要引入JQuery)：
<!DOCTYPE html> <html lang="en"> <style></style> <head><meta charset="UTF-8"><script src="myjs/jquery-1.9.1.min.js"></script><title>動態(tài)表格數(shù)據(jù)插入和分頁顯示</title> </head> <body><table><tr><td>序號：</td><td ><input type="text" class="form-control" id="number" name="number"></td></tr><tr><td>附件名稱：</td><td ><input type="text" class="form-control" id="annexName" name="annexName"></td></tr><tr><td>附件說明：</td><td ><textarea type="text" class="form-control" cols="15" id="annexInstruction" name="annexInstruction"></textarea></td></tr><tr><td><button type="button" id="addAnnex">添加</button></td></tr></table><table class="table table-bordered" id="mytable-add" style="margin-left: 30%;width: 40%"><tr><th><input type="checkbox" id="checkall"></th><th>序號</th><th>附件名稱</th><th>說明</th></tr><tbody id="annexTbody" ><!--動態(tài)生成--></tbody><tr ><td></td><td>當(dāng)前第<span id="currentPage">1</span>頁</td><td><button type="button" id="prePage">上一頁</button></td><td><button type="button" id="nextPage">下一頁</button></td></tr></table><script type="text/javascript">var count=0;var page=0;var size=3;var annexList = new Array();//添加數(shù)據(jù)$("#addAnnex").click( function () {//獲取值var number = $("#number").val();var annexName = $("#annexName").val();var annexInstruction = $("#annexInstruction").val();//拼接tr數(shù)據(jù)var annexHtml ="<tr >" +"<td>" +"<input type = 'checkbox' value='annex" + count + "'>" +"</td>" +"<td>"+ number + "</td>" +"<td>" + annexName + "</td>" +"<td>" + annexInstruction +"</td>" +"</tr>";if (count < size) {//第一頁顯示的數(shù)量$("#annexTbody").append(annexHtml);$("#nextPage").attr("disabled","disabled");} else {$("#nextPage").removeAttr("disabled");}count++;//保存到數(shù)組中var annex = new Object();annex.number = number;annex.annexName = annexName;annex.annexInstruction = annexInstruction;annexList.push(annex);});//上一頁$("#prePage").click( function () {page--;paging();});//下一頁$("#nextPage").click( function () {page++;paging();});//分頁function paging() {var annexHtml ="";var curentNumber = page*size;var length = curentNumber+size;//當(dāng)前頁數(shù)var currentPage = page+1;for(var i = curentNumber; i < length; i++ ) {// console.log(annexList[i]);if(typeof(annexList[i]) == "undefined") {break;}annexHtml +="<tr >" +"<td>" +"<input type = 'checkbox' >" +"</td>" +"<td>"+ annexList[i].number + "</td>" +"<td>" + annexList[i].annexName + "</td>" +"<td>" + annexList[i].annexInstruction +"</td>" +"</tr>";}if(typeof(annexList[length]) == "undefined") {//到了最后一頁不可以點擊$("#nextPage" ).attr("disabled","disabled");} else {//恢復(fù)點擊$("#nextPage" ).removeAttr("disabled");}if(page == 0) {//到了第一頁不可以點擊$("#prePage" ).attr("disabled","disabled");} else {$("#prePage" ).removeAttr("disabled");}//填充到表格$("#annexTbody").html(annexHtml);//顯示當(dāng)前頁數(shù)$("#currentPage").text(currentPage);}</script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的使用JS动态生成表格数据和分页显示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Xmanager连接Linux桌面异常解
- 下一篇： Mybatis和Spring集成 ses