用javascript中的DOM实现分页编辑删除

最新推荐文章于 2024-09-22 11:17:00 发布

zpx138332

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量365

点赞数

文章标签： javascript function email button border input

本文链接：https://blog.csdn.net/zpx138332/article/details/6520430

版权

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

</head>

     </tbody>
    </table>
    <div id="pages">

</div>

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 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 users = document.getElementById("users");

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(aupdate);
toper.appendChild(adelete);

//往行中添加
tr1.appendChild(tname);
tr1.appendChild(tsex);
tr1.appendChild(temail);
tr1.appendChild(tbir);
tr1.appendChild(toper);

users.appendChild(tr1);
tusers.appendChild(users);

adelete.onclick = function() {
  var tda = adelete.parentNode;
  var trb = tda.parentNode;
  users.removeChild(trb);
}
aupdate.onclick = function() {
  document.getElementById("addu").style.display = "none";
  document.getElementById("addu1").style.display = "block";
  var use = aupdate.parentNode.parentNode;
  var uses = use.childNodes;

  document.getElementById("name").value = uses[0].innerHTML;
  document.getElementById("sex").value = uses[1].innerHTML;
  document.getElementById("email").value = uses[2].innerHTML;
  document.getElementById("bir").value = uses[3].innerHTML;

var upUser = document.getElementById("upduser");
upUser.onclick = function() {

   use.childNodes[0].innerHTML = document.getElementById("name").value;
   use.childNodes[1].innerHTML = document.getElementById("sex").value;
   use.childNodes[2].innerHTML = document.getElementById("email").value
   use.childNodes[3].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 tbodyuser = document.getElementById("users");
var trusers = tbodyuser.getElementsByTagName("tr");
//获取总记录数
var countRecord = trusers.length;
//每页显示的条数
var PAGESIZE = 2;
//获取总页数
var countPage = (countRecord % PAGESIZE == 0 ? countRecord / PAGESIZE
   : Math.ceil(countRecord / PAGESIZE));
//创建分页节点的对象
var pages = document.getElementById("pages");
if (!pages.hasChildNodes()) {
  getPages(nowPage);
}
//点击首页的操作
indexPage.onclick = function() {
  nowPage = 1;
  shouye(countRecord, trusers);

}
//点击上一页的操作
upPage.onclick = function() {
  if (nowPage - 1 > 1) {
   nowPage -= 1;
  } else {
   nowPage = 1;
   shouye(countRecord, trusers);
  }
  var startPage = (nowPage - 1) * PAGESIZE;
  var endPage = startPage + PAGESIZE;
  shangye(startPage, endPage, countRecord, trusers);
}
//点击下一页的操作
downPage.onclick = function() {
            if(nowPage+1>=countPage){
            nowPage=countPage;
            }else{
            nowPage+=1;
            }
  var startPage = (nowPage - 1) * PAGESIZE;
  var endPage = startPage + PAGESIZE;
  shangye(startPage, endPage, countRecord, trusers);
}
//点击末页的操作
endPage.onclick = function() {

  nowPage=countPage;

  if(nowPage>1){
     for(var i=0;i<countRecord;i++){
     var startindex = (nowPage-1)*PAGESIZE;
     if(i<startindex){

     trusers[i].style.display="none";
     }
     else{
     trusers[i].style.display="block";
     }
     }
  }else{
  shouye(countRecord, trusers)
  }
}
}
//获取首页显示的信息
function shouye(countRecord, trusers) {
if (countRecord <= 2) {
  for ( var i = 0; i < PAGESIZE; i++) {
   trusers[i].style.display = "block"
   alert("---------------")
  }
} else {
trusers[0].style.display = "block"
trusers[1].style.display = "block"
  for ( var i = 2; i < countRecord; i++) {
   trusers[i].style.display = "none"
  }
}
}
//获取上一页下一页的信息
function shangye(startPage, endPage, countRecord, trusers) {
for ( var i = 0; i < countRecord; i++) {

  if (i >= startPage && i < endPage) {
   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>