DOM实现了增删改和分页

最新推荐文章于 2022-05-09 16:50:19 发布
最新推荐文章于 2022-05-09 16:50:19 发布
阅读量191 收藏 3
点赞数
分类专栏： java综合 文章标签： 百度 JavaScript HTML ViewUI

 

今天用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"
									οnclick="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="点击看我"
										οnclick=
	showCalendar(this, document.all.bir);
/>
								</td>
							</tr>

							<tr id="addu">
								<td colspan="2">
									<input type="button" value="添加" οnclick=
	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>

 

kuaile863
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用原生DOM实现分页功能
azyslwj的博客
02-19 610
Document </ul> </div> <script> // JavaScript prototype（原型对象） function Pagination (total, pageSize, pageCurrent) { this.total = total; this.pageSize = pageSize; t...
用js操作DOM来实现的分页
01-27
用js操作DOM来实现的分页！绝对的有用，只需改改就能变出很多的花样！
javascript写的dom分页
weihaiw的专栏
07-26 732
//分页显示函数,参数val 页数 function pageshow(val){ start = val*perpage-perpage; end = val*perpage-1; if(end>len)end=len; for(i=0;i<d.length;i++){
利用DOM创建分页列表
chuorou9758的博客
01-11 318
<!DOCTYPEhtml> <html> <headlang="en"> <metacharset="UTF-8"> <title></title> <linktype="text/...
用Javascrip中的DOM实现简单的分页编辑删除
qq_15130625的博客
03-18 132
addUser.html 名称 性别 邮箱 ...
使用js dom和jquery分别实现简单增删改
10-25
今天学了jquery框架的简单使用。于是用它实现简单的增删改，接着也用原始的javascript实现同样的功能，两者对比可以看出jquery的强大
js中script的上下放置区别，Dom的增删改创建操作实例分析
10-15
主要介绍了js中script的上下放置区别，Dom的增删改创建操作,结合实例形式分析了JavaScript基本dom事件、script在head和body中放置的区别、以及Dom的增删改创建等相关操作技巧,需要的朋友可以参考下
js表格操作，DOM实现数据动态增删查改
12-02
原生JavaScript，对数据表格进行操作，使用DOM实现数据的动态操作，包括增加、删除、查询、修改。
Dom生成表格和实现分页源码
09-27
dom转化为表格显示源码，并且有很强大的分页功能，搭上就能用
js操作dom节点实现分页（js原生）
m0_45136861的博客
08-08 395
js代码 /** * * @param {*} currentPage 当前点击的页码 * @param {*} pagenum 总页码 * @param {*} selectorLength 中间显示多少个 * @param {*} domId 需要渲染的dom的Id */ function createPageSelector(currentPage,pagenum,selectorLength,domId){ /*
记录数组的reduce使用方法，并简单实现一个带分页表格的DOM
weixin_42931681的博客
06-19 310
前两天看一个视频聊天时才知道的reduce这个数组的方法，简单看了一下别人写的觉得使用这个方法渲染数据挺不错的，于是自己就写了一个小DOM玩玩。 先给大家简单说说数组的reduce这个方法： 来张图先 依上图，reduce方法中传递两个参数，第一个参数是一个方法，方法中又有四个参数：分别代表 1.初始值。（也就是这个方法一开始的返回值，和reduce方法的第二个参数有关系，我一般设为空） 2.当前元素，相当于遍历数组，拿到每一个下标的值 3.数组索引（就不多说啦） 4.当前这个数组（...
【css】如何为页面DOM添加分页属性，在打印时实现内容分页效果
MoFe1的博客
05-09 476
在需要分页的DOM元素上添加style="page-break-after: always;"样式 示例： //添加样式后打印时一页只打印一个div中内容，一页打印不下的内容会在下一页中继续打印，当一个div内容结束后不管该页剩余空白多少都会跳至下页打印下一个div内容（实现WORD分页效果） <div class="div1" style="page-break-after: always;"> </div> <div class="div2" style="page-
【第52天】jQuery的常用方法，循环语句，结合AJAX实现分页
來秋的技術之路
01-17 608
第五十二天，学习了jQuery其他常用方法以及循环语句，结合AJAX实现分页。
html获取xml分页,js+DOM转化成html表格，并且实现强大的分页功能
weixin_39540023的博客
06-09 141
package com.zhangjun.xml;import java.io.PrintStream;import java.sql.ResultSet;import java.sql.ResultSetMetaData;import org.w3c.dom.Document;import org.w3c.dom.Element;public class AddItem{public void ...
使用JavaScript实现分页效果
ruancheng3的专栏
11-27 572
应公司需求，有时需要制作静态页面网站，而一旦涉及到文章的分页，实现起来非常麻烦，自己又刚入门，对js不是很熟悉，所以就拿来练练手。 　　首先页面结构如下，分别展示数据跟分页： 1 2 3 4 5 Document 6 7 ol, ul { 8 list-style: none; 9
（首页上一页下一页尾页 + 下拉框跳转）分页功能
热门推荐
DouBoomFly的博客
05-24 2万+
说在前头（本人用的是bootstrap +jQuery 和 struts2 +  MVC）不影响分页功能 制作一个分页功能： 效果如下： 由上图可知，此功能只适合页数不是特别多的情况下，页数多的时候，每次都要求得总记录数，太慢了。 【一】：1、总记录数，2、总页数，3、每页记录数，4、当前页 【二】：首页，上一页，下一页，尾页 【三】：直接跳转 一、java后台分页model
JavaScript DOM操作表格案例
侯春强的博客
10-14 658
使用DOM创建表格 方式一：（JavaScript DOM创建表格） Title #outer { width: 500px; height: 500px; margin: auto; } onload = functio
DOM（二）-07-DOM(示例-创建表格)
wy_0928的博客
08-20 436
表格样式table.css代码 @CHARSET "UTF-8"; table{ border:##249bdb 1px solid; width:500px; border-collapse:collapse; } table td{ border:#249bdb 1px solid; padding:5px;/*td左边顶格*/ } 主程序代码 <!-- 需求：制作表格
原生dom实现增删改查，全选反选
最新发布
06-13
好的，下面是原生DOM实现增删改查、全选反选的示例代码： ```html <!DOCTYPE html> <title>DOM增删改查、全选反选 <h3>DOM增删改查、全选反选示例 <!-- 添加元素 --> 添加 <!-- 显示元素列表 --> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值