kuaile863
- 浏览: 115990 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
贝塔ZQ：
试试用pageoffice插件读取excel。
Poi如何去读取excel文件 -
患过风伤：
...
Poi如何去读取excel文件 -
renci：
确实存在问题...
JSTL的fn.endsWith的错误 -
makemyownlife：
字符串拼接是丑陋的 你总结得不错 ：）
hibernate防注入的的方法 -
ishihan：
不错，对我有用！
javascript与正则表达式的验证案例
今天用DOM实现了增删改和分页在这里与大家分享由于时间问题仿百度分页还没有实现请大家等待。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>addUser.html</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>
</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">
<thead>
<tr>
<th>
<input type="checkbox" name="chbk" id="chbk1"
onclick="selectAll()" />
</th>
<th>
名称
</th>
<th>
性别
</th>
<th>
邮箱
</th>
<th>
出生日期
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody id="users">
</tbody>
</table>
<div id="pages">
</div>
</div>
<div style="border: 1px blue solid;">
<form>
<table id="divs">
<tbody id="addUsers">
<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 type="text/javascript">
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);
testPage();
}
//修改操作
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";
}
}
//当添加用户的时候调用分页技术
testPage();
}
//定义分页标签节点对象并创建
var indexPage = document.createElement("a");
var upPage = document.createElement("a");
var downPage = document.createElement("a");
var endPage = document.createElement("a");
var pages = document.getElementById("pages");
var nowpage = 1;
//分页技术的实现
function testPage() {
var tbodyUsers = document.getElementById("users");
var trUsers = tbodyUsers.getElementsByTagName("tr");
//获取总记录数
var countRecord = trUsers.length;
//每页显示的记录数
var PAGESIZE = 2;
//总页数
var countPage = (countRecord % PAGESIZE == 0 ? countRecord / PAGESIZE
: Math.ceil(countRecord / PAGESIZE));
//当前页信息
// =======>从那条记录开始 (nowpage-1)*PAGESIZE;
//var nowpage = countPage;
//获取创建分页标签的节点对象
var pages = document.getElementById("pages");
//如果没有创建分页标签的节点则创建节点对象
if (!pages.hasChildNodes()) {
getPages(nowpage);
}
if (countRecord % PAGESIZE != 0) {
var dop = document.getElementById("dop");
var somePage = document.createElement("a");
somePage.appendChild(document.createTextNode("[" + countPage + "]"));
somePage.setAttribute("href", "#");
pages.insertBefore(somePage, dop);
somePage.onclick = function() {
var SHOWPAGE = 6;
if (countPage < (SHOWPAGE / 2 + 1)) {
startpage = 1;
endpage =countPage;
} else {
if (nowpage <= (SHOWPAGE / 2 + 1)) {
startpage = 1;
endpage = nowpage + 2;
if (endpage >= countPage) {
endpage = countPage;
}
} else {
startpage = nowpage - 3;
endpage = nowpage + 2;
if (endpage >= countPage) {
endpage = countPage;
if (countPage < SHOWPAGE) {
startpage = 1;
} else {
startpage = endpage - 5;
}
}
}
}
}
PageInfo(startindex, endindex, countRecord, trUsers)
}
//当点击首页时的操作
indexPage.onclick = function() {
nowpage = 1;
//显示首页的记录
indexPageInfo(countRecord, trUsers, nowpage, PAGESIZE);
}
//当点击上一页的操作
upPage.onclick = function() {
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)
}
//当点击下一页的操作
downPage.onclick = function() {
if (nowpage + 1 >= countPage) {
nowpage = countPage;
} else {
nowpage += 1;
}
//显示上一页记录
var startindex = (nowpage - 1) * PAGESIZE;
var endindex = startindex + PAGESIZE;
PageInfo(startindex, endindex, countRecord, trUsers)
}
//当点击最后一页的操作
endPage.onclick = function() {
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 {
indexPageInfo(countRecord, trUsers, nowpage, PAGESIZE);
}
}
}
//首页的显示记录
function indexPageInfo(countRecord, trUsers, nowpage, PAGESIZE) {
if (nowpage == 1) {
for ( var i = 0; i <= PAGESIZE; i++) {
trUsers[i].style.display = "block";
}
}
if (countRecord <= PAGESIZE) {
} else {
for ( var i = 2; i < countRecord; i++) {
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";
}
}
}
//最后一页的显示记录
//创建分页的相应链接地址
function getPages(numpage) {
indexPage.appendChild(document.createTextNode("首页"));
indexPage.setAttribute("href", "#");
upPage.appendChild(document.createTextNode("上一页"));
upPage.setAttribute("href", "#");
downPage.appendChild(document.createTextNode("下一页"));
downPage.setAttribute("href", "#");
downPage.setAttribute("id", "dop");
endPage.appendChild(document.createTextNode("末页"));
endPage.setAttribute("href", "#");
//获取创建连接的位置的节点对象
//添加到节点中
pages.appendChild(indexPage);
pages.appendChild(upPage);
pages.appendChild(downPage);
pages.appendChild(endPage);
}
function selectAll() {
//获取所有用户信息的根节点
var users = document.getElementById("users");
//获取根节点中的input标签节点
var ips = users.getElementsByTagName("input");
//获取chbk的节点对象
var chbk = document.getElementById("chbk1");
for ( var i = 0; i < ips.length; i++) {
//让遍历的结果于chbk中接到的checked属性值一致即可
ips[i].setAttribute("checked", chbk.getAttribute("checked"));
}
}
</script>
1
顶
顶
2
踩
踩
分享到：
发表评论
-
java如何通过socket实现服务端与客户端交互
2012-02-02 18:08 21438刚刚开始学习如何通过socket去发送信息下边的案例也是书 ... -
通过jacob实现word转为HTML
2012-02-02 17:28 4722这几天研究jacob原本的需求是将word显示到FCK中 ... -
jfreechart的中文API
2011-11-24 11:30 1270上一个项目中用到了jfreechart工具 在网站上找了好多a ... -
I/O 缓冲区拷贝文件
2011-11-21 17:41 1536缓冲区的出现提高了对流的操作效率。 原理：其实就是 ... -
poi如何去写入excel文件
2011-11-11 18:21 15211上一篇讲解了一下如何读取excel，那在这篇就讲一下如何去写文 ... -
Poi如何去读取excel文件
2011-11-11 17:59 12338很久没有写博客了，这几天写项目，在其中找到的一个文件 是读 ... -
Jquery的应用
2011-03-30 19:55 1248Jquery 是继 prototype ... -
JSON两种数据结构
2011-03-29 09:15 1786JSON主要有两种数据结构 ... -
java试卷
2011-03-29 08:01 1308今天去公司面试，做 ... -
用AJAX实现网页中的增删改
2011-03-24 19:21 1679用AJAX实现网页中的增删改 今天运用了Ajax读取数据库 ... -
下拉列表文本的移动
2011-03-22 20:11 1087下拉列表文本移动 在js中还有许多有用的东西， ... -
Dom解析XML文件实现省市县三级下拉菜单的实现
2011-03-22 19:47 1432Dom解析XML文件实现省市县三级下拉菜单的实现 今天回顾 ... -
Dom小结
2011-03-16 19:50 997DOM总结； DOM： DOM= Docum ... -
用js编写的考试系统倒计时
2011-03-15 19:54 2035今天学习了庞大的js， ... -
反射应用（三）
2011-03-03 18:53 967反射应用（三） 1. 紧接着我们学习了反射应用如何 ... -
反射应用（二）
2011-03-03 18:52 1071反射应用（二） 紧接着我们学习了反射应用如何去 ... -
反射的应用（一）
2011-03-03 18:45 874反射的应用（一） 1. 类的加载:是指把类的 .class 文 ...
相关推荐
AngularJS的`ng-repeat`指令用于在DOM中循环渲染数据，而`ng-if`或`ng-show/hide`可以控制元素的显示与隐藏，实现增删改的交互效果。 2. **分页**：分页是大型数据集常见的展示方式，避免一次性加载过多数据导致...
综上所述，这个项目展示了如何使用Ajax、三层架构和jQuery实现一个具有增删改、批量删除和分页功能的Web应用，并利用SQL和存储过程进行数据库操作。这种设计模式和开发技术在现代Web开发中非常常见，对于理解和实践...
总结一下，这个“jquery实现的无刷新分页增删改”项目展示了如何利用jQuery的Ajax、DOM操作和事件处理功能，结合后台API，构建一个无需刷新整个页面即可进行数据操作的前端应用。这种技术在现代Web应用中十分常见，...
本话题主要探讨如何利用原生JavaScript和DOM来实现数据表格中的动态增删查改功能，这对于前端开发来说是一项基本且重要的技能。 1. **创建数据表格** - 使用`<table>`元素创建表格结构，包括`<thead>`定义表头，`...
在这个场景中，我们将深入探讨SSH框架如何实现基本的增删改操作，并结合页面美化和数据校验来提升用户体验。 首先，让我们从Struts2开始，这是一个基于MVC设计模式的Action驱动框架，负责处理用户请求并转发到相应...
解压后，我们可以看到具体的HTML、CSS、JavaScript（可能包括jQuery和Ajax实现）、Java类（可能涉及到Struts2和Hibernate的配置和实体类）以及数据库配置文件等，这些都是实现无刷新增删改查和分页功能的组成部分。...
2. **事件处理**：当用户在数据网格中执行增删改操作时，需要监听并响应相关的DOM事件，比如点击添加按钮、删除确认、单元格编辑等。 3. **API接口设计**：前端操作通常会触发后端API调用，以持久化数据。设计合适...
综上所述，JavaScript提供了强大的能力来处理表格数据的增删改操作，无论是基础的DOM操作还是借助现代框架和库，都可以满足各种Web应用的需求。实际开发中，应根据项目规模、性能要求和团队技能选择合适的方法。
在这个"address-list-master.zip"压缩包中，我们有一个基于这两种技术实现的通讯录应用，它具备基本的增、删、改、查功能。以下是对这个通讯录应用的详细解析： 首先，HTML（HyperText Markup Language）是网页内容...
本文将深入探讨如何使用jQuery实现表格的动态增删改功能，并结合后台数据进行绑定，以构建高效的数据展示和管理界面。 首先，我们要理解jQuery的核心概念。jQuery通过选择器（如$("#id")或$(".class")）来选取DOM...
- **添加（Create）**：jQuery提供了方便的DOM操作方法，如`append()`和`prepend()`，可以将新的元素插入到现有元素中，实现数据的添加。 - **删除（Remove）**：使用`remove()`方法可以直接移除DOM元素，`detach...
1. **jQuery库**：提供方便的DOM操作和Ajax请求，是实现分页的基础。 2. **Bootstrap**：提供现成的分页组件样式，可以快速美化分页效果。 3. **Lodash/Underscore**：辅助处理数据，如计算总页数、生成页码数组等。...
在项目中，EasyUI用于创建表格展示数据，实现数据的增删改功能，以及页面布局和美化，如分页、排序和筛选功能。 **SSH (Spring, Struts2, Hibernate)** SSH是一个流行的Java Web开发框架组合，包括Spring、Struts2...
在实现CRUD操作时，KnockoutJS可以大大简化DOM操作和数据状态管理。通过使用其绑定和依赖跟踪机制，视图会自动响应模型数据的变化，实现数据的动态更新。 接下来，BootstrapTable是一个基于Bootstrap的表格插件，它...
在实现增删改查功能时，我们还需要考虑表格的动态加载和分页，这可能需要用到Bootstrap Table插件。这个插件提供了丰富的功能，如排序、搜索、分页等，通过引入`bootstrap-table.js`和相关CSS文件，我们可以轻松地将...
5. **UI渲染优化**：更新UI时，确保只渲染可视区域内的节点，避免无谓的计算和DOM操作。 6. **异步处理**：数据加载通常涉及网络请求，因此应使用异步操作，以避免阻塞用户界面。 7. **分页策略**：根据数据量，...
此外，jQuery还可以用于实现表格的可编辑功能，通过监听`click`事件添加编辑和保存按钮，利用`.val()`获取或设置单元格数据，实现数据的增删改。 总的来说，jQuery表格特效是通过其强大的选择器、DOM操作和动画效果...