Java乔晓松-利用JavaScript实现js对user用户的分页和实现js对用户的增删改查操作

来源：互联网发布：淘宝卖衣服从哪里进货编辑：程序博客网时间：2024/06/06 12:37

js_users.html文件的源代码：

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

<script type="text/javascript" src="./js/users.js" charset="UTF-8"></script>
</head>

users.js文件的源代码：

var uptr = null;
window.onload = function() {
var pagesize = 3;
var recondsize = 0;
var countpage = 0;
var nowpage = 1;
var users = new Array();
var start = 0;
var end = 0;

var userName = $("userName");
var userSex = $("userSex");
var userRole = $("userRole");

var updaBtn = $("updateUser");

updaBtn.onclick = function() {
  if (uptr == null) {
   alert("没有数据需要更新");
  } else {
   var tds = uptr.childNodes;
   tds[0].firstChild.nodeValue = userName.value;
   tds[1].firstChild.nodeValue = userSex.value;
   tds[2].firstChild.nodeValue = userRole.value;
   var id = uptr.getAttribute("id");

   alert(id);
   alert(users.length);
   users.splice(id, 1, users);
   alert(users[id].name);
   alert(users.length);
   //alert(users[id].name+users[id].sex+users[id].role);
   users[id].name = userName.value;
   users[id].sex = userSex.value;
   users[id].role = userRole.value;
   // 这条数据在 users数组的下标
   //users[1];
  }
};
var domshowUsers = $("showUsers");
var addBtn = $("addUsers");
addBtn.onclick = function() {
  var user = new User(userName.value, userSex.value, userRole.value);
  users.push(user);
  recondsize = users.length;
  countpage = recondsize % pagesize == 0 ? recondsize / pagesize : Math
    .ceil(recondsize / pagesize);
  if (recondsize > pagesize) {
   start = recondsize - pagesize;
   end = recondsize;
  } else {
   start = 0;
   end = recondsize;
  }
  showUsers(users, start, end, recondsize, countpage, domshowUsers);
};

  if (recondsize <= pagesize && recondsize > 0) {
   start = 0;
   end = recondsize;
  } else {
   start = (nowpage - 1) * pagesize;
   end = nowpage * pagesize;
  }
  showUsers(users, start, end, recondsize, countpage, domshowUsers);
};
nextPage.onclick = function() {
  nowpage = nowpage + 1;
  if (nowpage >= countpage) {
   nowpage = countpage;
  }

  if (recondsize <= pagesize && recondsize > 0) {
   start = 0;
   end = recondsize;
  } else {
   start = (nowpage - 1) * pagesize;
   if (nowpage * pagesize > recondsize) {
    end = recondsize;
   } else {
    end = nowpage * pagesize;
   }
  }
  showUsers(users, start, end, recondsize, countpage, domshowUsers);
};
lastPage.onclick = function() {
  nowpage = countpage;

  if (recondsize <= pagesize && recondsize > 0) {
   start = 0;
   end = recondsize;
  } else {
   start = (nowpage - 1) * pagesize;
   end = recondsize;
  }
  showUsers(users, start, end, recondsize, countpage, domshowUsers);
};

};
function $(id) {
return document.getElementById(id);
}

function User(name, sex, role) {
this.name = name;
this.sex = sex;
this.role = role;
}

function showUsers(users, start, end, recondsize, countpage, domshowUsers) {

for ( var jj = 0; jj < domshowUsers.childNodes.length;) {
  domshowUsers.removeChild(domshowUsers.childNodes[jj]);
}
for ( var i = start; i < end; i++) {
  var user = users[i];
  var tr = document.createElement("tr");
  tr.setAttribute("id", i);
  var td1 = document.createElement("td");
  td1.appendChild(document.createTextNode(user.name));

var td2 = document.createElement("td");
td2.appendChild(document.createTextNode(user.sex));

var td3 = document.createElement("td");
td3.appendChild(document.createTextNode(user.role));

  tr.appendChild(td1);
  tr.appendChild(td2);
  tr.appendChild(td3);
  tr.appendChild(td4);
  if (domshowUsers.hasChildNodes()) {
   domshowUsers.insertBefore(tr, domshowUsers.firstChild);
  } else {
   domshowUsers.appendChild(tr);
  }
}
$("msg").innerHTML = "总共:[" + recondsize + "]条数据,[" + countpage + "]页";
}