版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/starjuly/article/details/80633401
根据录入的内容动态显示到页面,不需要通过数据库保存,这样子减轻服务器压力。同时如果数据过多,支持分页显示,这些数据到保存时可以一起提交到后台。
效果如下:
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>