使用JS动态生成表格数据和分页显示

根据录入的内容动态显示到页面，不需要通过数据库保存，这样子减轻服务器压力。同时如果数据过多，支持分页显示，这些数据到保存时可以一起提交到后台。
效果如下：

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>动态表格数据插入和分页显示</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" ><!--动态生成--></tbody><tr ><td></td><td>当前第<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();//添加数据$("#addAnnex").click( function () {//获取值var number = $("#number").val();var annexName = $("#annexName").val();var annexInstruction = $("#annexInstruction").val();//拼接tr数据var annexHtml ="<tr >" +"<td>" +"<input type = 'checkbox' value='annex" + count + "'>" +"</td>" +"<td>"+ number + "</td>" +"<td>" + annexName + "</td>" +"<td>" + annexInstruction +"</td>" +"</tr>";if (count < size) {//第一页显示的数量$("#annexTbody").append(annexHtml);$("#nextPage").attr("disabled","disabled");} else {$("#nextPage").removeAttr("disabled");}count++;//保存到数组中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;//当前页数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 {//恢复点击$("#nextPage" ).removeAttr("disabled");}if(page == 0) {//到了第一页不可以点击$("#prePage" ).attr("disabled","disabled");} else {$("#prePage" ).removeAttr("disabled");}//填充到表格$("#annexTbody").html(annexHtml);//显示当前页数$("#currentPage").text(currentPage);}</script>
</body>
</html>

使用JS动态生成表格数据和分页显示相关推荐

js动态修改表格数据
js动态修改表格数据使用js在表格个内进行动态修改,需要再点击每一个td的时候在每个td里动态的添加一个input文本框然后把input的样式设计一下与td的宽度和高度一致去掉input的内外边框 ...
js动态生成表格(原创)
原文:js动态生成表格(原创) 源代码下载地址:http://www.zuidaima.com/share/1571860936543232.htm 原生js实现,兼容各主流浏览器,提供生成表格,修改 ...
js动态生成表格【含合并单元格的表格】
最近遇到需求,动态生成表格,类似Excel,支持合并单元格的表格,代码分享给大家~ 一.网上找到的简单生成表格的例子: 以下是生成规则表格m行*n列类似,可以直接打开HTML查看结果. <!DO ...
php输出动态表格,PHP动态生成表格
好文网为大家准备了关于PHP动态生成表格范文,好文网里面收集了五十多篇关于好PHP动态生成表格好文,希望可以帮助大家.更多关于PHP动态生成表格内容请关注好文网篇一:PHP生成静态网页的通用代码最近研 ...
JS实现动态生成表格并提交表格数据向后端表格中数据转为json
原文地址需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 首先动态生成表格. 1.首先我们需要导入JS库文件.jQuery 2.然后在页面d ...
html怎么自动导入数据并排序,JS实现table表格数据排序功能(可支持动态数据+分页效果)...
asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需 ...
django通过ajax请求接口返回多条数据，并动态生成表格，请求表单后将表格数据并入库
一.最近在做接口相关的开发,需求是这样的,通过一个接口所需要传递的参数,调用接口后,处理接口响应的参数,返回多条数据,并动态生成表格,请求表单后将表格的数据入库,下面是我改过的代码,跟实际代码有些出入 ...
js 动态生成html（js根据后台返回数据生成html页面中的table标签）（转义字符）
js 动态生成html table标签中内容js生成 html代码 js代码 js 动态生成html 触发事件传参字符转义 table标签中内容js生成 html代码 <div><t ...
js动态生成html表格
刚在论坛上面逛的时候看到有人问html表格怎么动态生成,我回了一下发现有好多小伙伴追问- - 看来还是有很多人不会的啊,于是决定写个博来解救万千小伙伴于水火之中(mdzz) 首先我们要在html里面有 ...

使用JS动态生成表格数据和分页显示

使用JS动态生成表格数据和分页显示相关推荐

最新文章

热门文章