JQuery页面的表格数据的增加与分页的实现 - Web前端
作者：98wpeu发布时间：2026-06-28分类：网页前端技术浏览：5
导读：复制代码代码如下:varcountPage;varnowPag=1;varpageSize;varcountSize;varstarIndex;vare...
复制代码 代码如下:
var countPage;
var nowPag = 1;
var pageSize;
var countSize;
var starIndex;
var endIndex;
// 用户提交信息
var name;
var sex;
var age;
// 定义行号
var num = 1;
$(document).ready(function() {
// 注册添加用户的事件
$("#submit").click(function() {
// 获取用户提交的信息
name = $("#name").val();
sex = $("input[name='sex']:checked").val();
age = $("#age").val();
pageSize = $("#selectSize option:selected").val();
// alert(name+sex+age+pageSize);
// 创建表格下的tr对象
$tr = $("<tr class='data' ></tr>");
$td1 = $("<td></td>");
$td2 = $("<td></td>");
$td3 = $("<td></td>");
$td4 = $("<td></td>");
$td5 = $("<td></td>");
$tr.append($td1.APPend("<input type='checkbox'>"));
$tr.append($td2.Append(name));
$tr.append($td3.append(sex));
$tr.append($td4.append(age));
$tr.append($td5.append("<input type='button' value='删除'>"));
$("#show").append($tr);
pageNation();
});
// 注册选择显示条数的操作
$("#selectSize").change(function() {
pageSize = $("#selectSize option:selected").val();
pageNation();
});
// 注册分页操作的按钮点击事件
$("#first").click(pageNation);
$("#back").click(pageNation);
$("#next").click(pageNation);
$("#last").click(pageNation);
});
// 分页操作的函数
var pageNation = function() {
// 获取所有的数据条数
countSize = $("#show tr").size();
// 获取总页数
countPage = Math.ceil(countSize / pageSize);
// 处理翻页的操作
if (this.nodeType == 1) {
var idValue = $(this).attr("id");
if ("first" == idValue) {
// alert(idValue);
nowPag = 1;
} else if ("back" == idValue) {
// alert(nowPag);
if (nowPag > 1) {
nowPag--;
}
} else if ("next" == idValue) {
// alert(idValue);
if (nowPag < countPage) {
nowPag++;
}
} else if ("last" == idValue) {
// alert(idValue);
nowPag = countPage;
}
}
// alert(pageSize);
// 获取显示开始和结束的下标
starIndex = (nowPag - 1) * pageSize + 1;
endIndex = nowPag * pageSize;
if (endIndex > countSize) {
// alert("下标大于总记录数"+endIndex);
endIndex = countSize;
}
if (countSize < pageSize) {
// alert("总记录数小小于每页的显示条数"+endIndex);
endIndex = countSize;
}
// alert(starIndex);
if (starIndex == endIndex) {
// 显示的操作
$("#show tr:eq(" + (starIndex - 1) + ")").show();
$("#show tr:lt(" + (starIndex - 1) + ")").hide();
} else {
// 显示的操作
$("#show tr:gt(" + (starIndex - 1) + ")").show();
$("#show tr:lt(" + (endIndex - 1) + ")").show();
// 隐藏的操作
$("#show tr:lt(" + (starIndex - 1) + ")").hide();
$("#show tr:gt(" + (endIndex - 1) + ")").hide();
}
// 改变底部显示操作
$("#sizeInfo")
.html(
"当前从" + starIndex + "条到第" + endIndex + "条记录,共" + countSize
+ "条记录.");
$("#pageInfo").HTML("当前是第" + nowPag + "页,共" + countPage + "页.");
};
[html] view plAIncopy在code上查看代码片派生到我的代码片
<!DOCTYPE html>
<html>
<head>
<title>用JQuery实现</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../JS/jQuery-2.0.3.min.js"></script>
<!--<link rel="StyleSheet" type="text/CSS" href="./styles.css">-->
<style type="text/css">
div {
border: 1px black solid;
}
#tableDiv {
height: 500px;
}
#insertDiv {
width: 300px;
margin-right: 550px;
}
#tableDiv {
width: 500px;
margin-left: 350px;
}
#top {
width: 500px;
height: 400px;
}
#topTABle,#contentTable,#bottomTable {
width: 450px;
}
</style>
<script type="text/JavaScript" src="../js/jqueryTablePageNation.js"></script>
</head>
<body>
<div id="content" align="center">
<FORM action="">
<div id="insertDiv" style="width: 263px; ">
<table id="insertData" border="1px">
<tr>
<td>姓名<input type="text" id="name" value="donghogyu"></td>
</tr>
<tr>
<td>性别<input type="radio" name="sex" value="男"
checked="checked">男<input type="radio" name="sex"
value="女">女
</td>
</tr>
<tr>
<td>年龄<input type="text" id="age" value="21"></td>
</tr>
<tr>
<td align="center"><input type="button" id="submit"
value="添加数据"></td>
</tr>
</table>
</div>
<div id="tableDiv">
<div id="top">
<table id="topTable" border="1px">
<thead>
<th><input type="Checkbox">全选</th>
<th>姓名</th>
<th>性别</th>
<th>密码</th>
<th>操作</th>
</thead>
<tbody id="show">
</tbody>
</table>
</div>
<div id="bottom">
<table id="bottomTable" border="1px">
<tr align="center">
<td><input type="button" value="首页" id="first"></td>
<td><input type="button" value="上一页" id="back"></td>
<td><input type="button" value="下一页" id="next"></td>
<td><input type="button" value="末页" id="last"></td>
<td><select id="selectSize">
<option value="3">3</option>
<option value="5">5</option>
<option value="10">10</option>
</select>条</td>
</tr>
<tr align="center">
<td colspan="6"><span id="sizeInfo">当前从0条到第0条记录.</span></td>
</tr>
<tr align="center">
<td colspan="6"><span id="pageInfo">当前是第0页,共0页.</span></td>
</tr>
</table>
</div>
</div>
</form>
</div>
</body>
</html>
var countPage;
var nowPag = 1;
var pageSize;
var countSize;
var starIndex;
var endIndex;
// 用户提交信息
var name;
var sex;
var age;
// 定义行号
var num = 1;
$(document).ready(function() {
// 注册添加用户的事件
$("#submit").click(function() {
// 获取用户提交的信息
name = $("#name").val();
sex = $("input[name='sex']:checked").val();
age = $("#age").val();
pageSize = $("#selectSize option:selected").val();
// alert(name+sex+age+pageSize);
// 创建表格下的tr对象
$tr = $("<tr class='data' ></tr>");
$td1 = $("<td></td>");
$td2 = $("<td></td>");
$td3 = $("<td></td>");
$td4 = $("<td></td>");
$td5 = $("<td></td>");
$tr.append($td1.APPend("<input type='checkbox'>"));
$tr.append($td2.Append(name));
$tr.append($td3.append(sex));
$tr.append($td4.append(age));
$tr.append($td5.append("<input type='button' value='删除'>"));
$("#show").append($tr);
pageNation();
});
// 注册选择显示条数的操作
$("#selectSize").change(function() {
pageSize = $("#selectSize option:selected").val();
pageNation();
});
// 注册分页操作的按钮点击事件
$("#first").click(pageNation);
$("#back").click(pageNation);
$("#next").click(pageNation);
$("#last").click(pageNation);
});
// 分页操作的函数
var pageNation = function() {
// 获取所有的数据条数
countSize = $("#show tr").size();
// 获取总页数
countPage = Math.ceil(countSize / pageSize);
// 处理翻页的操作
if (this.nodeType == 1) {
var idValue = $(this).attr("id");
if ("first" == idValue) {
// alert(idValue);
nowPag = 1;
} else if ("back" == idValue) {
// alert(nowPag);
if (nowPag > 1) {
nowPag--;
}
} else if ("next" == idValue) {
// alert(idValue);
if (nowPag < countPage) {
nowPag++;
}
} else if ("last" == idValue) {
// alert(idValue);
nowPag = countPage;
}
}
// alert(pageSize);
// 获取显示开始和结束的下标
starIndex = (nowPag - 1) * pageSize + 1;
endIndex = nowPag * pageSize;
if (endIndex > countSize) {
// alert("下标大于总记录数"+endIndex);
endIndex = countSize;
}
if (countSize < pageSize) {
// alert("总记录数小小于每页的显示条数"+endIndex);
endIndex = countSize;
}
// alert(starIndex);
if (starIndex == endIndex) {
// 显示的操作
$("#show tr:eq(" + (starIndex - 1) + ")").show();
$("#show tr:lt(" + (starIndex - 1) + ")").hide();
} else {
// 显示的操作
$("#show tr:gt(" + (starIndex - 1) + ")").show();
$("#show tr:lt(" + (endIndex - 1) + ")").show();
// 隐藏的操作
$("#show tr:lt(" + (starIndex - 1) + ")").hide();
$("#show tr:gt(" + (endIndex - 1) + ")").hide();
}
// 改变底部显示操作
$("#sizeInfo")
.html(
"当前从" + starIndex + "条到第" + endIndex + "条记录,共" + countSize
+ "条记录.");
$("#pageInfo").HTML("当前是第" + nowPag + "页,共" + countPage + "页.");
};
[html] view plAIncopy在code上查看代码片派生到我的代码片
<!DOCTYPE html>
<html>
<head>
<title>用JQuery实现</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../JS/jQuery-2.0.3.min.js"></script>
<!--<link rel="StyleSheet" type="text/CSS" href="./styles.css">-->
<style type="text/css">
div {
border: 1px black solid;
}
#tableDiv {
height: 500px;
}
#insertDiv {
width: 300px;
margin-right: 550px;
}
#tableDiv {
width: 500px;
margin-left: 350px;
}
#top {
width: 500px;
height: 400px;
}
#topTABle,#contentTable,#bottomTable {
width: 450px;
}
</style>
<script type="text/JavaScript" src="../js/jqueryTablePageNation.js"></script>
</head>
<body>
<div id="content" align="center">
<FORM action="">
<div id="insertDiv" style="width: 263px; ">
<table id="insertData" border="1px">
<tr>
<td>姓名<input type="text" id="name" value="donghogyu"></td>
</tr>
<tr>
<td>性别<input type="radio" name="sex" value="男"
checked="checked">男<input type="radio" name="sex"
value="女">女
</td>
</tr>
<tr>
<td>年龄<input type="text" id="age" value="21"></td>
</tr>
<tr>
<td align="center"><input type="button" id="submit"
value="添加数据"></td>
</tr>
</table>
</div>
<div id="tableDiv">
<div id="top">
<table id="topTable" border="1px">
<thead>
<th><input type="Checkbox">全选</th>
<th>姓名</th>
<th>性别</th>
<th>密码</th>
<th>操作</th>
</thead>
<tbody id="show">
</tbody>
</table>
</div>
<div id="bottom">
<table id="bottomTable" border="1px">
<tr align="center">
<td><input type="button" value="首页" id="first"></td>
<td><input type="button" value="上一页" id="back"></td>
<td><input type="button" value="下一页" id="next"></td>
<td><input type="button" value="末页" id="last"></td>
<td><select id="selectSize">
<option value="3">3</option>
<option value="5">5</option>
<option value="10">10</option>
</select>条</td>
</tr>
<tr align="center">
<td colspan="6"><span id="sizeInfo">当前从0条到第0条记录.</span></td>
</tr>
<tr align="center">
<td colspan="6"><span id="pageInfo">当前是第0页,共0页.</span></td>
</tr>
</table>
</div>
</div>
</form>
</div>
</body>
</html>
相关推荐
- Jquery获取和修改img的src值的方法 - Web前端
- 基于JQuery实现的Select级联 - Web前端
- 2013年优秀jQuery插件整理小结 - Web前端
- jquery sortable的拖动方法示例详解 - Web前端
- 为开发者准备的10款最好的jQuery日历插件 - Web前端
- jQuery不使用插件及swf实现无刷新文件上传 - Web前端
- 2013年优秀jQuery插件整理小结 - Web前端
- jquery修改属性值实例代码(设置属性值) - Web前端
- 结合JQ1.9通过js正则判断各种浏览器版本的方法 - Web前端
- jQuery 计算iframe 窗口大小的方法 - Web前端
- 网页前端技术排行
-
- 1【第六章】Foundation之按钮和下拉功能 - Web前端
- 2jQuery编写widget的一些技巧分享 - Web前端
- 3在Mac/PC上远程调试iPhone/iPad上的网页 - Web前端
- 4jQuery实例教程:制作网页中可折叠的面板 - Web前端
- 5基于jquery的滚动条滚动固定div(附演示下载) - Web前端
- 6分析Iconfont-阿里巴巴矢量常用图标库 - Web前端
- 7分享精心挑选的12款优秀jQuery Ajax分页插件和教程 - Web前端
- 8[Web前端]用javascript实现默认图片替代未显示的图片 - Web前端
- 9JS网页制作实例:标签云 - Web前端
- 最近发表
-
- WordPress随机显示特色图片插件：Random Post Thumbnails
- KeePass实现Chrome浏览器自动填充密码方法一
- LNMP一键包nginx 301强制跳转到https教程
- KeePass实现Chrome浏览器自动填充密码方法二
- #建站# 免费的VPS管理软件Xshell8/Xftp8中文版下载
- 使用Xshell 8连接VPS教程_电脑登录vps的方法
- WordPress评论界面添加烟花????效果
- 不同浏览器书签同步方案：坚果云+Floccus_详细使用教程
- iOS端KeePassXC客户端APP：Strongbox Password Safe
- 给WordPress评论中的Gravatar头像图片添加ALT属性