<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>User.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">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../js/wpCalendar.js"></script>
</head>
<body>
<div align="center">
<h2>
所有的用户信息
</h2>
<!-- 显示区域 -->
<div
style="border: 1px red solid; margin-bottom: 30px; padding: 10px 10%; width: 600px">
<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 red solid; width: 400px">
<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="oo"
onclick="showCalendar(this,document.all.bir)">
</td>
</tr>
<tr id="add1">
<td colspan="2" align="center">
<input type="button" value="添加" onclick="addUser()" id="add" />
</td>
</tr>
<tr id="update1">
<td colspan="2" align="center">
<input type="button" value="修改" id="upduser" />
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</body>
</html>
<script type="text/javascript">
<!--
window.onload=function(){
document.getElementById("update1").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");
//创建cbk列
var cbk = document.createElement("td");
//创建tname列
var tname = document.createElement("td");
//创建tsex列
var tsex = document.createElement("td");
//创建temail列
var temail = document.createElement("td");
//创建tbir列
var tbir = document.createElement("td");
//创建toper列
var toper = document.createElement("td");
//创建一个checkbox对象cbk1
var cbk1 = document.createElement("input");
cbk1.setAttribute("type","checkbox");
cbk1.setAttribute("name","chbk");
//把checkbox对象cbk1放到cbk列中
cbk.appendChild(cbk1);
//创建name对象并把它放到tname列中
tname.appendChild(document.createTextNode(name));
//创建sex对象并把它放到tsex列中
tsex.appendChild(document.createTextNode(sex));
//创建email对象并把它放到temail列中
temail.appendChild(document.createTextNode(email));
//创建bir对象并把它放到tbir中
tbir.appendChild(document.createTextNode(bir));
//创建a元素adelete和aupdate
var adelete = document.createElement("a");
var aupdate = document.createElement("a");
//并分别给它们设置属性
adelete.setAttribute("href","#");
aupdate.setAttribute("href","#");
//在设置它们的文本节点
adelete.appendChild(document.createTextNode("删除 |"));
aupdate.appendChild(document.createTextNode("修改"));
//把a元素的对象adelete和aupdate放到toper列中
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("add1").style.display="none";
document.getElementById("update1").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("update1").style.display="none";
document.getElementById("add1").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 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);
}
//当点击首页时的操作
indexPage.onclick = function() {
nowpage = 1;
//显示首页的记录
indexPageInfo(countRecord, trUsers);
}
//当点击上一页的操作
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);
}
}
}
//首页的显示记录
function indexPageInfo(countRecord, trUsers) {
if (countRecord <= 2) {
for ( var i = 0; i < PAGESIZE; i++) {
trUsers[i].style.display = "block";
}
} 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", "#");
endPage.appendChild(document.createTextNode("末页"));
endPage.setAttribute("href", "#");
//获取创建连接的位置的节点对象
var pages = document.getElementById("pages");
//添加到节点中
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>
分享到：
相关推荐
本话题主要探讨如何利用原生JavaScript和DOM来实现数据表格中的动态增删查改功能，这对于前端开发来说是一项基本且重要的技能。 1. **创建数据表格** - 使用`<table>`元素创建表格结构，包括`<thead>`定义表头，`...
在这个场景中，我们将深入探讨SSH框架如何实现基本的增删改操作，并结合页面美化和数据校验来提升用户体验。 首先，让我们从Struts2开始，这是一个基于MVC设计模式的Action驱动框架，负责处理用户请求并转发到相应...
标题中的“DOM对标签的增删改”指的是在Web开发中使用Document Object Model（DOM）来操作HTML或XML文档中的元素。DOM是一种编程接口，它允许开发者通过JavaScript或其他支持的语言来动态更新、添加和删除页面内容。...
总之，"超强DOM增删改,js日历综合案例实现"这个项目展示了JavaScript与DOM操作的强大结合，通过理解并运用这些DOM操作技术，我们可以创建出具有高度交互性和用户体验的日历应用。学习和掌握这些技能对于任何希望提升...
标题"jquery写的增删改"指的是使用 jQuery 实现的数据表或列表的动态操作，即添加（Add）、删除（Delete）和修改（Modify）功能。这些功能在网页应用中十分常见，特别是在处理用户交互和数据管理时。 jQuery 提供了...
JavaScript，作为客户端脚本语言，允许我们对HTML文档进行操作，实现数据的增删改功能，为用户提供实时反馈。在这个主题中，我们将深入探讨如何使用JavaScript来实现这些操作。 首先，让我们理解HTML的基础。HTML...
"多表格固定列，实现动态增删改"这个主题涉及到的是如何使用前端技术来实现对表格数据的高效操作，特别是固定列、动态添加、删除和修改功能。下面我们将深入探讨这一话题。 首先，固定列在网页表格中非常实用，因为...
通过动态添加或删除这些元素，我们可以实现表格内容的增删改。 CSS（Cascading Style Sheets）则负责美化页面，使表格看起来更加立体和吸引人。我们可以使用CSS选择器来定位特定的表格元素，然后设置边框、背景色、...
本示例“jquery实现的无刷新分页增删改”正是将jQuery的强大功能应用于数据管理，提供了一种高效且用户体验良好的解决方案。 首先，我们来理解“无刷新分页”。传统的网页分页通常需要用户点击分页按钮后，页面重新...
本文将详细讲解如何利用jQuery实现在不刷新界面的情况下对数据库进行增删改操作，同时实现界面的联动效果。 首先，我们要了解jQuery的核心特性。jQuery通过选择器（如$("#id")或$(".class")）来选取DOM元素，然后...
在这个案例中，我们将深入探讨如何利用Dom4j实现XML文档的增删改查操作，并遵循分层架构的思想来组织代码。 **一、Dom4j解析XML** 1. **解析XML文档**：Dom4j通过`DocumentBuilderFactory`和`DocumentBuilder`来...
本教程将探讨如何实现通用的Web表格的增删改操作，包括前端交互与后端处理，以及提供源码以供参考。 一、前端交互 前端交互主要涉及到HTML表格的创建、JavaScript或jQuery对表格元素的操作，以及AJAX与后端服务器的...
在这个项目中，我们关注的是如何利用JavaScript实现购物车的增、删、改以及商品的单选操作，这些都是电商网站必备的功能。 首先，我们要理解JavaScript的基本语法和数据类型，它是ECMAScript的一个实现，提供了变量...
在本资源包"树的操作【菜单增删改拖动】.zip"中，我们重点关注的是如何在用户界面中实现树结构的动态操作，如增、删、改、拖动等交互功能。这些功能通常在文件管理器、组织结构展示、权限管理等场景中广泛使用。资源...
【JavaScript DOM】是JavaScript...通过学习这些内容，开发者能够熟练掌握JavaScript与DOM的结合，实现丰富的网页交互效果，如动态加载内容、响应用户操作等。了解并熟练运用DOM是成为优秀前端开发者的必备技能之一。
在本文中，我们将探讨如何使用JavaScript的原生DOM操作和jQuery库来实现Web页面上的基本增删改功能。这些功能对于前端开发至关重要，因为前端交互往往涉及动态地修改网页内容。 首先，我们来了解一下什么是DOM...
我们将以"editable_static_form.rar_html 增删改"为例，深入解析实现这一功能的技术细节。 首先，我们要明白HTML是网页的基础，它是用于构建网页结构的标记语言。在这个案例中，我们需要创建一个HTML表格（`<table>...
例如，在Java中，使用DOM解析器的`createElement()`方法创建新节点，然后用`appendChild()`方法将其添加到适当位置。 2. XML删除元素（Delete） 删除XML元素通常涉及查找特定元素并移除它。继续上面的例子，如果想...
2. **事件处理**：当用户在数据网格中执行增删改操作时，需要监听并响应相关的DOM事件，比如点击添加按钮、删除确认、单元格编辑等。 3. **API接口设计**：前端操作通常会触发后端API调用，以持久化数据。设计合适...
在本项目中，Ajax被用于实现用户交互的异步性，使得用户在操作如添加、删除、修改数据时，页面不会整体刷新，提高用户体验。 **三层架构** 三层架构是一种常见的软件设计模式，通常包括表现层（UI）、业务逻辑层...