javascript实现分页及页面的增加删除修改操作

最新推荐文章于 2023-05-16 17:02:53 发布

iteye_3224

最新推荐文章于 2023-05-16 17:02:53 发布

阅读量158

点赞数

文章标签： javascript ViewUI

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>addUser.html</title>

}

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";
}

}

//当添加用户的时候调用分页技术
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;
alert(startindex + "====================++++++");
var endindex = startindex + PAGESIZE;

PageInfo(startindex, endindex, countRecord, trUsers)
}
//当点击下一页的操作
downPage.onclick = function() {

if (nowpage + 1 >= countPage) {
nowpage = countPage;
} else {
nowpage += 1;
}
alert(nowpage + "-----------------");

//显示上一页记录
var startindex = (nowpage - 1) * PAGESIZE;
alert(startindex + "====================++++++");
var endindex = startindex + PAGESIZE;
alert(startindex + "-----" + endindex + "---");
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) {
trUsers[i].style.display = "block";
} else {
for ( var i = 2; i < countRecord; i++) {
trUsers[i].style.display = "none";
}
}
}
//上一页下一页的显示记录
function PageInfo(startindex, endindex, countRecord, trUsers) {
alert("=======================");
for ( var i = 0; i < countRecord; i++) {
if (i >= startindex && i < endindex) {
trUsers[i].style.display = "block";
} else {
trUsers[i].style.display = "none";
}
}