之前的学习过程中一直都是采用Java技术中的MVC模式对数据库数据进行的操作，这两天刚学习了JavaScript和HTML DOM，感觉JS还是很强大的。于是编写了一个简单的管理系统，可直接利用JavaScript实现HTML页面数据的增、删、查、改操作，当然还有分页的。下面是代码实现：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>UserManage.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">
<style type="text/css">
#dis {
color: green;
font-size: 12px;
}
</style>
<script type="text/javascript" src="./js/wpCalendar.js">
</script>
<script type="text/javascript">
window.onload = function() {
document.getElementById("btn2").style.display = "none";
}
function UserManage() {
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 itable = document.getElementById("itable");
//创建行
var tr = document.createElement("tr");
var chk = 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 input = document.createElement("input");
input.setAttribute("type", "checkbox");
input.setAttribute("id", "chk");
input.setAttribute("name", "cx");
var a1 = document.createElement("a");
a1.setAttribute("href", "#");
var txt1 = document.createTextNode("编辑");
a1.appendChild(txt1);
var a2 = document.createElement("a");
a2.setAttribute("href", "#");
var txt2 = document.createTextNode("删除");
a2.appendChild(txt2);
var txt3 = document.createTextNode("|")
chk.appendChild(input);
tname.appendChild(document.createTextNode(name));
tsex.appendChild(document.createTextNode(sex));
temail.appendChild(document.createTextNode(email));
tbir.appendChild(document.createTextNode(bir));
toper.appendChild(a1);
toper.appendChild(txt3);
toper.appendChild(a2);
//往行中添加
tr.appendChild(chk);
tr.appendChild(tname);
tr.appendChild(tsex);
tr.appendChild(temail);
tr.appendChild(tbir);
tr.appendChild(toper);
var itbody = document.getElementById("itbody");
itbody.appendChild(tr);
itable.appendChild(itbody);
a1.onclick = function() {
document.getElementById("btn1").style.display = "none";
document.getElementById("btn2").style.display = "block";
var utr = a1.parentNode.parentNode;
var utd = utr.childNodes;
document.getElementById("name").value = utd[1].innerHTML;
document.getElementById("sex").value = utd[2].innerHTML;
document.getElementById("email").value = utd[3].innerHTML;
document.getElementById("bir").value = utd[4].innerHTML;
var iupdate = document.getElementById("iupdate");
iupdate.onclick = function() {
utd[1].innerHTML = document.getElementById("name").value;
utd[2].innerHTML = document.getElementById("sex").value;
utd[3].innerHTML = document.getElementById("email").value;
utd[4].innerHTML = document.getElementById("bir").value;
document.getElementById("btn1").style.display = "block";
document.getElementById("btn2").style.display = "none";
document.getElementById("name").value = "";
document.getElementById("email").value = "";
document.getElementById("bir").value = "";
}
}
a2.onclick = function() {
itbody.removeChild(a2.parentNode.parentNode);
}
pagination();
}
var startPage = document.createElement("a");
var pageUp = document.createElement("a");
var pageDown = document.createElement("a");
var endPage = document.createElement("a");
var nowPage = 1;
var pageSize = 2;
function pagination() {
var itbody = document.getElementById("itbody");
var trs = itbody.getElementsByTagName("tr");
var countRecord = trs.length;
var countPage = (countRecord % pageSize == 0 ? countRecord / pageSize
: Math.ceil(countRecord / pageSize));
var dis = document.getElementById("dis");
if (!dis.hasChildNodes()) {
displayPage();
}
startPage.onclick = function() {
nowPage = 1;
startPageInfo(countRecord, trs);
}
pageUp.onclick = function() {
if (nowPage - 1 > 1) {
nowPage -= 1;
} else {
nowPage = 1;
startPageInfo(countRecord, trs);
}
var startIndex = (nowPage - 1) * pageSize;
var endIndex = startPage + pageSize;
pageInfo(startIndex, endIndex, countRecord, trs);
}
pageDown.onclick = function() {
if (nowPage + 1 >= countPage) {
nowPage = countPage;
} else {
nowPage += 1;
}
var startIndex = (nowPage - 1) * pageSize;
var endIndex = startIndex + pageSize;
pageInfo(startIndex, endIndex, countRecord, trs);
}
endPage.onclick = function() {
nowPage = countPage;
if (nowPage > 1) {
var startIndex = (nowPage - 1) * pageSize;
for ( var i = 0; i < countRecord; i++) {
if (i < startIndex) {
trs[i].style.display = "none";
} else {
trs[i].style.display = "block";
}
}
} else {
startPageInfo(countRecord, trs);
}
}
}
function startPageInfo(countRecord, trs) {
if (countRecord <= 2) {
for ( var i = 0; i < pageSize; i++) {
trs[i].style.display = "block";
}
} else {
for ( var j = 2; j < countRecord; j++) {
trs[j].style.display = "none";
}
}
}
function pageInfo(startIndex, endIndex, countRecord, trs) {
for ( var i = 0; i < countRecord; i++) {
if (i >= startIndex && i < endIndex) {
trs[i].style.display = "block";
} else {
trs[i].style.display = "none";
}
}
}
function displayPage() {
startPage.appendChild(document.createTextNode("首页"));
startPage.setAttribute("href", "#");
pageUp.appendChild(document.createTextNode("上一页"));
pageUp.setAttribute("href", "#");
pageDown.appendChild(document.createTextNode("下一页"));
pageDown.setAttribute("href", "#");
endPage.appendChild(document.createTextNode("末页"));
endPage.setAttribute("href", "#");
var disdiv = document.getElementById("dis");
disdiv.appendChild(startPage);
disdiv.appendChild(pageUp);
disdiv.appendChild(pageDown);
disdiv.appendChild(endPage);
}
</script>
</head>
<body>
<div align="center">
<h1>
显示所有的用户界面
</h1>
<div
style="width: 350px; border: 1px red solid; margin-bottom: 100px; padding: 10px 10%">
<table border="1px" cellpadding="0" cellspacing="0" id="itable">
<thead>
<tr>
<th>
<input type="checkbox" name="chks" id="ichk" />
</th>
<th>
名称
</th>
<th>
性别
</th>
<th>
邮箱
</th>
<th>
出生日期
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody id="itbody"></tbody>
</table>
<br />
<div id="dis"></div>
</div>
<div style="width: 350px; border: 1px blue solid;">
<form>
<table>
<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"
onfocus="showCalendar(this)" readonly />
</td>
</tr>
<tr id="btn1">
<td colspan="2">
<input type="button" value="添加" id="iadd" onclick="UserManage()" />
</td>
</tr>
<tr id="btn2">
<td colspan="2">
<input type="button" value="更新" id="iupdate" />
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
分享到：
相关推荐
html+js实现增删改查，超简单
数据库部分：创建表、增删改查语句的书写等。 前端部分：HTML、CSS、jQuery、JavaScript等。 编码顺序 添加项目需要使用的各种jar包 HTML 页面表单的编写 Apache方法的DBUtils编写 实体类的数据初始化（添加私有...
使用Servlet+Jsp+JDBC实现增删改查，前台显示界面使用JavaScript、Ajax与后台交互进行登录验证，并对查询结果实现分页、局部刷新，以及复选框(全选、反选)操作，适合Web开发的初学者
主要介绍了JavaScript 实现HTML DOM增删改查操作,结合实例形式分析了JavaScript针对HTML DOM元素增删改查常见操作技巧与使用注意事项,需要的朋友可以参考下
为了给初学者一些快速上手的前后端都包含的demo，特意以最简单的方式实现这个实例。 里面包含的有后端的增删改查代码以及html页面去调用接口实现前后端交互。
原生JavaScript，对数据表格进行操作，使用DOM实现数据的动态操作，包括增加、删除、查询、修改。
HTML+XHTML+CSS+JavaScript+DOM+AJAX语法及范例实用辞典是一本系统、全面的语法和范例辞典，详尽介绍了html、xhtml、css、javascript、dom、ajax这6种技术的语法。全书共分5章，书中不但对语法进行了理论讲解，而且...
java报表实现增删改查，分页等功能，Css样式，javascript前端实现。
web js购物车（增删改查），新手易懂
用js实现的一个增删改查，给学校javascript的同学用
javascript+dom学习文档，pdf格式，内容齐全
javaScript实现学生信息的增删改查，以及翻页，界面优美
用javascript来实现Ajax效果的增删改查
JavaScript+DOM编程艺术， JavaScript+DOM编程艺术， JavaScript+DOM编程艺术，
一本我喜欢的书
Javascript+DOM编程艺术，完整版。
内容概要：java图书馆里系统，主要是实现对图书的增删改查操作，以及在分页的基础上实现增删改查。 适用人群：毕业设计、练习javaweb、有一定基础的编程人员 可以学到的知识点： html、css、javascript、jquary基本...
JavaScript5.0+DOM编程艺术pdf（最新中文版）JavaScript5.0+DOM编程艺术pdf（最新中文版）