<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>添加信息</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./js/wpCalendar.js">
</script>
<style type="text/css">
<!--
a {
font-size: 14px;
}
-->
</style>
</head>
<body>
<div align="center">
<h1>
显示有的用户界面
</h1>
<div
style="border: 1px red solid; margin-bottom: 100px; padding: 10px 10%">
<table border="1px" cellpadding="0" cellspacing="0" id="tusers"
style="font: 15px">
<thead>
<tr>
<th>
<input type="checkbox" name="chbk" id="chbk1" />
</th>
<th>
名称
</th>
<th>
性别
</th>
<th>
邮箱
</th>
<th>
出生日期
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody id="users">
</tbody>
</table>
<table>
<tr>
<td colspan="6">
<span><a href="#" onClick="fenye(0)">上一页</a> </span>
<span><a href="#" onClick="fenye(2)">下一页</a> </span>
<span><a href="#" onClick="fenye(1)">首页</a> </span>
<span><a href="#" onClick="fenye(-1)">末页</a> </span>
</td>
</tr>
</table>
</div>
<div style="border: 1px blue solid;">
<form>
<table id="divs">
<tbody id="addUsers" style="font: 14px">
<tr>
<td>
用户名:
</td>
<td>
<input type="text" name="name" id="name" />
</td>
</tr>
<tr>
<td>
性别:
</td>
<td>
<select id="sex">
<option value="男">
男
</option>
<option value="女">
女
</option>
</select>
</td>
</tr>
<tr>
<td>
邮箱:
</td>
<td>
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td>
出生日期:
</td>
<td>
<input type="text" id="bir" name="bir" />
<input type=button value="点击看我"
onclick="showCalendar(this,document.all.bir)">
</td>
</tr>
<tr id="addu">
<td colspan="2">
<input type="button" value="添加" onClick="addUser()" id="add" />
</td>
</tr>
<tr id="addu1">
<td colspan="2">
<input type="button" value="修改" id="upduser" />
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</body>
</html>
<script>
var PAGESIZE = 5;
var nowpage = 1;
window.onload = function() {
document.getElementById("addu1").style.display = "none";
}
function addUser() {
var name = document.getElementById("name").value;
var sex = document.getElementById("sex").value;
var email = document.getElementById("email").value;
var bir = document.getElementById("bir").value;
//获取表格节点对象
var tusers = document.getElementById("tusers");
//创建行
var tr1 = document.createElement("tr");
var cbk = document.createElement("td");
var tname = document.createElement("td");
var tsex = document.createElement("td");
var temail = document.createElement("td");
var tbir = document.createElement("td");
var toper = document.createElement("td");
var cbk1 = document.createElement("input");
cbk1.setAttribute("type", "checkbox");
cbk1.setAttribute("name", "chbk");
cbk.appendChild(cbk1);
tname.appendChild(document.createTextNode(name));
tsex.appendChild(document.createTextNode(sex));
temail.appendChild(document.createTextNode(email));
tbir.appendChild(document.createTextNode(bir));
var adelete = document.createElement("a");
var aupdate = document.createElement("a");
adelete.setAttribute("href", "#");
aupdate.setAttribute("href", "#");
adelete.appendChild(document.createTextNode("删除 |"));
aupdate.appendChild(document.createTextNode("修改"));
toper.appendChild(adelete);
toper.appendChild(aupdate)
//往行中添加
tr1.appendChild(cbk);
tr1.appendChild(tname);
tr1.appendChild(tsex);
tr1.appendChild(temail);
tr1.appendChild(tbir);
tr1.appendChild(toper);
var users = document.getElementById("users");
users.appendChild(tr1);
tusers.appendChild(users);
//删除操作
adelete.onclick = function() {
users.removeChild(adelete.parentNode.parentNode);
}
//修改操作
aupdate.onclick = function() {
document.getElementById("addu").style.display = "none";
document.getElementById("addu1").style.display = "block";
var utr = aupdate.parentNode.parentNode;
var utrs = utr.childNodes;
document.getElementById("name").value = utrs[1].innerHTML;
document.getElementById("sex").value = utrs[2].innerHTML;
document.getElementById("email").value = utrs[3].innerHTML;
document.getElementById("bir").value = utrs[4].innerHTML;
var upUser = document.getElementById("upduser");
upUser.onclick = function() {
utr.childNodes[1].innerHTML = document.getElementById("name").value;
utr.childNodes[2].innerHTML = document.getElementById("sex").value;
utr.childNodes[3].innerHTML = document.getElementById("email").value;
utr.childNodes[4].innerHTML = document.getElementById("bir").value;
document.getElementById("addu1").style.display = "none";
document.getElementById("addu").style.display = "block";
}
}
fenyeLength();
}
function fenyeLength() {
var trs = document.getElementById("users");
var size = trs.childNodes.length;
var trss = trs.childNodes;
if (trss.length > PAGESIZE) {
for ( var i = 0; i < size; i++) {
trss[i].style.display = "none";
}
var st = size - PAGESIZE;
for ( var i = 0; i < PAGESIZE; i++) {
trss[st].style.display = "block";
st++;
}
}
}
function fenye(nowP) {
var trs = document.getElementById("users");
//总计录数
var countRecord = trs.childNodes.length;
var trUsers = trs.childNodes;
//转换标识符
var page = parseInt(nowP);
//总页数
var countPage = (countRecord % PAGESIZE == 0 ? countRecord / PAGESIZE
: Math.ceil(countRecord / PAGESIZE));
//判断最后一页
if (page == -1) {
nowpage = countPage;
if (nowpage > 1) {
var startindex = (nowpage - 1) * PAGESIZE;
for ( var i = 0; i < countRecord; i++) {
if (i < startindex) {
trUsers[i].style.display = "none";
} else {
trUsers[i].style.display = "block";
}
}
}
//判断点击首页时的操作
} else if (page == 1) {
nowpage = 1;
//显示首页的记录
indexPageInfo(countRecord, trUsers);
//判断点击上一页时的操作
} else if (page == 0) {
if (nowpage - 1 > 1) {
nowpage -= 1;
} else {
nowpage = 1;
indexPageInfo(countRecord, trUsers);
}
//显示上一页记录
var startindex = (nowpage - 1) * PAGESIZE;
var endindex = startindex + PAGESIZE;
PageInfo(startindex, endindex, countRecord, trUsers);
//判断点击下一页时的操作
} else if (page == 2) {
if (nowpage + 1 >= countPage) {
nowpage = countPage;
} else {
nowpage += 1;
}
//显示上一页记录
var startindex = (nowpage - 1) * PAGESIZE;
var endindex = startindex + PAGESIZE;
PageInfo(startindex, endindex, countRecord, trUsers)
}
}
//首页的显示记录
function indexPageInfo(countRecord, trUsers) {
if (countRecord <= PAGESIZE) {
for ( var i = 0; i < countRecord; i++) {
trUsers[i].style.display = "block";
}
} else {
for ( var i = 0; i < countRecord; i++) {
if (i < PAGESIZE) {
trUsers[i].style.display = "block";
} else {
trUsers[i].style.display = "none";
}
}
}
}
//上一页 下一页的显示记录
function PageInfo(startindex, endindex, countRecord, trUsers) {
for ( var i = 0; i < countRecord; i++) {
if (i >= startindex && i < endindex) {
trUsers[i].style.display = "block";
} else {
trUsers[i].style.display = "none";
}
}
}
</script>
分享到:
相关推荐
得用JavaScript面向对象编程,编写了一个分页通过控件。代码精简,功能强大.
在本教程中,我们将探讨如何利用Ajax、Servlet、Java和JavaScript来实现这一功能。 首先,让我们从Java后端开始。Servlet是Java Web应用程序中的一个关键组件,用于处理HTTP请求和响应。在分页场景中,Servlet主要...
下面我们将详细介绍几种JavaScript实现分页样式的常见方法和关键技术点。 1. 基础分页实现: 分页的基本原理是通过JavaScript获取服务器上所有数据的总页数,然后根据当前页码显示相应的内容。可以使用数组模拟...
在本项目中,我们将探讨如何使用纯JavaScript实现分页功能,以及涉及的相关知识点。 首先,我们需要理解分页的基本原理。分页的核心思想是将大数据集分成多个较小的部分,每个部分称为一页。用户每次只加载和查看...
JavaScript实现分页效果是网页开发中的常见需求,特别是在数据量较大、需要分批加载内容时。本示例通过JavaScript和CSS实现了一个简单的分页组件,适用于动态数据展示和用户交互。 首先,HTML结构中包含了分页组件...
本文将详细介绍如何使用原生JavaScript实现分页效果,这种方法不依赖于任何第三方框架,仅使用纯JavaScript代码来完成分页逻辑和UI的构建。 首先,了解分页实现的基本原理是必要的。分页通常涉及到以下几个核心部分...
本资源“JS实现分页效果代码.zip”提供了一种用JavaScript实现分页功能的解决方案,特别适用于动态加载数据或者需要优化用户浏览体验的场合。以下是对这个压缩包中包含的两个文件及其相关知识点的详细解释。 1. **...
本篇文章将介绍两种纯JavaScript实现分页的方法,适用于不依赖任何外部库或框架的情况。 **方法一** 首先,我们需要在HTML中创建一个用于显示分页链接的基本结构。这个结构包括上一页、下一页、数字页码、跳转至...
以上就是JavaScript实现分页功能的基本流程。通过结合HTML、CSS和JavaScript,我们可以创建出各种样式和交互效果丰富的分页组件。在实际项目中,还需要考虑性能优化,比如缓存已加载的数据,以及处理分页状态的持久...
本篇将详细介绍两个纯JavaScript实现分页的经典例子,帮助你理解和掌握这一核心技术。 首先,我们要明白分页的基本原理:将大量数据分为若干个部分,每次只加载一部分到页面上,用户可以通过导航按钮切换不同的数据...
本文将详细讨论如何使用纯JavaScript实现分页功能,以及如何实现跳转指定页和自定义样式。 首先,我们需要理解分页的基本原理。分页通常涉及到两个关键参数:每页显示的数据量(每页条数)和当前页数。根据这些参数...
4. 无刷新分页样式:通过CSS和JavaScript实现分页按钮的激活、禁用状态,以及当前页的高亮效果。 总结,Ajax技术为实现网页分页提供了便利,通过异步通信减少页面刷新,提高了用户体验。理解Ajax的工作原理,编写...
本文将深入探讨如何使用JavaScript实现分页功能,以及相关的技巧和注意事项。 首先,我们需要理解分页的基本概念。通常,一个分页系统包括以下几个关键部分: 1. **总记录数**:这是你要展示的数据总数。 2. **每...
给定的代码片段展示了如何使用JavaScript实现分页功能。以下是关键代码段的详细解析: ```javascript // 页码生成函数 function upPage(p) { nowPage = p; // 隐藏所有行 for (var i = 0; i ; i++) { obj[i]....
在JavaScript实现分页导航时,我们通常会创建一个分页类,该类包含以下关键方法: 1. 初始化:根据总数据量和每页显示的数据量计算总页数,并生成初始的分页状态。 2. 更新页码:当用户点击分页按钮或输入新的页码时...
这个压缩包“简单JS实现分页带数据查询效果.zip”提供了一个使用JavaScript实现分页和数据查询的示例。下面我们将详细探讨这个主题。 1. **基础概念** - **分页**:为了提高用户体验和页面加载速度,将大量数据...
在这个主题中,我们将深入探讨JavaScript如何实现分页功能,以及与Spring框架的整合。 首先,理解JavaScript分页的基本原理。在网页上,分页通常涉及到两个主要部分:前端UI的展示和后端数据的获取。前端UI包括页码...
这个名为"javascript经典特效---分页的文本显示.rar"的压缩包文件显然是关于使用JavaScript实现分页文本显示的一个教程或示例。下面将详细讨论JavaScript分页的基本原理、实现方法以及可能涉及到的相关技术。 分页...
2. **JavaScript实现分页**: 使用JavaScript进行分页更加灵活,可以直接在客户端进行计算和页面更新,减少了服务器的负载。一个名为`getpage()`的JavaScript函数可以获取URL中的`start`值,然后动态修改表单元素,...
在这个主题中,我们将深入探讨"分页js"的相关知识点,包括分页的基本原理、JavaScript实现分页的方法、以及如何结合CSS(如`pageNav.css`)优化分页的样式。 首先,我们要理解分页的基本概念。分页通常用于显示...