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

最新推荐文章于 2023-07-09 22:01:04 发布

ABCJIECBA

最新推荐文章于 2023-07-09 22:01:04 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript function email button border input

本文链接：https://blog.youkuaiyun.com/ABCJIECBA/article/details/6268187

本文介绍了一个使用纯 JavaScript 实现的用户界面，该界面能够动态地添加和修改用户信息，并通过简单的分页技术展示数据。具体实现了添加用户、修改用户信息及分页浏览等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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