当前位置:编程学习 > JAVA >>

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

js_users.html文件的源代码:
 
 
 
 
 
 
 
<script type="text/javascript" src="./js/users.js" charset="UTF-8"></script>
 
 
 
 
 
 
   用户名: 性别:
    id="userSex" /> 职业:
    type="button" value="添加用户" id="addUsers" />
    value="更新用户" id="updateUser" />
 
 
 
 
 
   
 
   
 
     
 
     
 
     
 
     
 
   
 
   
 
   
 
   
用户名 性别 职业 操作
 
 
 
   
   
   
   
   
 
 
 
 
 
 
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].易做图+users[id].role);
   users[id].name = userName.value;
   users[id].易做图 = 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);
 };
 var firstPage = $("firstPage");
 var backPage = $("backPage");
 var nextPage = $("nextPage");
 var lastPage = $("lastPage");
 firstPage.onclick = function() {
  nowpage = 1;
  if (recondsize <= pagesize && recondsize > 0) {
   start = 0;
   end = recondsize;
  } else {
   start = 0;
   end = pagesize;
  }
  showUsers(users, start, end, recondsize, countpage, domshowUsers);
 };
 backPage.onclick = function() {
  nowpage = nowpage - 1;
  if (nowpage <= 1) {
   nowpage = 1;
  }
  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, 易做图, role) {
 this.name = name;
 this.易做图 = 易做图;
 this.role = role;
}
function showUsers(users, start, end, recondsize, countpage, domshowUsers) {
 for ( var jj = 0; jj < domshowUsers.childNodes.length;) {
  domsh
补充:Web开发 , 其他 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,