用javascript实现信息的增删改查

最新推荐文章于 2022-11-13 23:17:40 发布
最新推荐文章于 2022-11-13 23:17:40 发布
阅读量1.9k 收藏
点赞数
文章标签： javascript function email border input html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/whylyq/article/details/6520659
版权

用javascript实现信息的增删改查

Html页面：Demo2.html

<body>

<div align="center">

  <h1>显示所有的用户界面</h1>

  <div style="border: 1px red solid; margin-bottom: 100px; padding: 10px 10%;">

  <table border="1px" cellpadding="0" cellspacing="0" id="tusers">

  <thead>

  <tr><th><input type="checkbox" name="chbk"  id="chbk1" οnclick="selectAll()"/></th>

  <th>名称</th>

   <th>性别</th>

    <th>邮箱</th>

     <th>出生日期</th>

      <th>操作</th>

  </tr>

  </thead>

  <tbody id="users">

  </tbody>

  </table>

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

  </div> 

  <div style="border: 1px blue solid;">

   <form action="">

   <table id="divs">

   <tbody id="addUsers">

   <tr>

   <td>用户名:</td>

   <td><input type="text" name="name" id="name"/></td>

   </tr>

   <tr>

   <td>性别:</td>

   <td><select id="sex">

   <option value="男">男</option>

   <option value="女">女</option>

   </select>

   </td>

   </tr>

   <tr>

   <td>邮箱</td>

   <td><input type="text" name="email" id="email"/></td>

   </tr>

   <tr>

   <td>出生日期:</td>

   <td>

   <input type="text" id="bir" name="bir"/>

   <input type=button value="添加日期" οnclick="showCalender(this,document.all.bir)"/>

   </td>

   </tr>

   <tr id="addu">

   <td colspan="2"><input type="button" value="添加" οnclick="addUser()" id="add"/></td>

   </tr>

   <tr id="addu1">

   <td colspan="2"><input type="button" value="修改" id="upduser" /></td>

   </tr>

   </tbody>

   </table>

   </form> 

  </div>

</div>

</body>

<script>

window.onload = function(){

alert("onload");

document.getElementById("addu1").style.display = "none";

}

function selectAll(){

var users = document.getElementById("users");

var ips = users.getElementsByTagName("input");

var chbk = document.getElementById("chbk1");

for(var i=0;i<ips.length;i++){

ips[i].setAttribute("checked",chbk.getAttribute("checked"));

}

}

function addUser(){

alert("add");

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").Value;

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

}

index.onclik=function(){

noepage=1;

indexPageInfo(countRecord,trUsers);

}

upPage.οnclick=function(){

if(nowpage-1>1){

nowpage-=1;

}else{

nowpage=1;

indexPageInfo(countRecord,trUsers);

}

var startindex =(nowpage-1)*PAGESIZE;

var endindex=startindex+PAGESIZE;

PageInfo(startindex,endindex,countRecord,trUsers);

}

downPage.οnclick=function(){

if(nowpage+1>=countPage){

nowpage=countPage;

}else{

nowpage=+1;

}

var startindex =(nowpage-1)*PAGESIZE;

var endindex=startindex+PAGESIZE;

PageInfo(startindex,endindex,countRecord,trUsers);

}

endPage.οnclick=function(){

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) {

for ( var i = 0; i < PAGESIZE; i++) {

trUsers[i].style.display = "block";

}

} else {

for ( var i = 2; i < countRecord; i++) {

trUsers[i].style.display = "none";

}

}

}

function PageInfo(startindex, endindex, countRecord, trUsers) {

for ( var i = 0; i < countRecord; i++) {

if (i >= startindex && i < endindex) {

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);

}

</script>

whylyq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
JavaScript实现一个增删改查的功能
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-03 64
JavaScript实现一个增删改查的功能
【javascript】实现类后端增删改功能（附源码）
xingyu_qie的专栏
11-12 1321
javascript之初会有很多练手的例子，当还没有接触到后端（java ptython）这些的时候，老师会让我们自己模拟实现一个纯javascript的类后端的增删改查效果。通过后端的思路，抛弃那些复杂的逻辑，纯前端实现一套增删改查的效果。如果明白了这一套逻辑，那么以后学到ajax的时候再和服务端联调，就会容易理解的多。☆ 希望你可以学会。
(网页)javaScript增删改查(转)
weixin_30596343的博客
11-07 62
转自CSDN: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <t...
简单的网页信息管理增删改查（html js实现）
NuanShuTT的博客
08-13 5522
一个简单的网页管理信息，可以添加姓名年龄，也可以单独对每行的数据进行删除修改，还可以进行查询操作 html代码 记录列表</br></br> 姓名: <input type="text" name="name" id="name" placeholder="姓名" /> 年龄: <input type="text" placeholder="年龄" /> <input type="button" value="添加" onclick="tes
un8.21:用html实现增删改查功能（代码篇）。
努力是为了让自己不平庸。。。
08-22 5276
如何在前端页面实现增删改查功能？
javascript实现信息增删改查的方法
10-23
主要介绍了javascript实现信息增删改查的方法,实例分析了javascript操作页面元素实现针对页面信息的增删改查功能,具有一定参考借鉴价值,需要的朋友可以参考下
javaScript实现学生信息的增删改查，以及翻页
01-23
在这个特定的项目中，"javaScript实现学生信息的增删改查，以及翻页"，我们关注的是如何利用JavaScript来管理数据，并构建一个具有用户友好的界面。 首先，让我们深入了解增删改查（CRUD）操作。CRUD是创建（Create...
javascript js 操作数组 增删改查的简单实现
10-22
下面小编就为大家带来一篇javascript js 操作数组 增删改查的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
BootStrapTable实现增删改查
03-07
在MVC（Model-View-Controller）架构中，结合C#后端，BootstrapTable可以实现数据的增删改查操作，提供用户友好的界面和高效的后台处理。 1. **BootstrapTable的基本结构** BootstrapTable的核心是HTML的`<table>`...
通过HTML网页对mysql数据库进行增删改查(CRUD实例)
yvge669的博客
11-13 1万+
在HTML页面对Mysql数据库进行增删改查，CRUD案例 基于HTML + 一点点入门Spring +Mysql 从前端到后端的实操案例，附带项目源代码
html最简单的增删改查实现方式
05-11
用js实现的一个增删改查，给学校javascript的同学用
html+js实现同页面修改信息效果
07-24
html+js实现同页面修改信息效果。用户体验好，同一个页面用户个人中心安全设置
js+html写的实现表格的动态增删改查和表单验证
08-04
js+html写的实现表格的动态增删改查和表单验证
html+js操作websq的sqlite进行增删改查demo
07-20
WebSQL例子、webSQL 增删改查sqlite3增删改查Demo,HTML5 WebSQL 的增删改查操作_HTML5+CSS3
js实现增删改查
12-18
利用原生js实现增删改查操作 附带多样效果，打包分享，仅供参考
JavaScript之实现基本的增删改查功能
热门推荐
阿毅
05-06 3万+
开心一笑 听说这两天，全国都很冷。福建人说1度好冷，北京人笑了：我们这零下17度。黑龙江人也笑了：我们这零下33度。呼伦贝尔人听到哈哈大笑：我们这零下43度。福建人听完冷笑一声：我说的是室内，室内，室内 视频教程 CSDN学院： http://edu.csdn.net/lecturer/994 腾讯学院： https://huangwy.ke.qq.com/ 网易学
SpringBoot+Mybatis+mysql简单的增删改查+html源码分享
silence1120的博客
04-27 3566
新手编写,大佬勿喷~~ 首先application.properties的配置 server.port=8080 spring.datasource.url=jdbc:sqlserver://172.0.0.1:8080;databasename=xxx spring.datasource.username=xxx spring.datasource.password=xxx spring.dat...
JavaScript的增删改查
ww_Filling_it的博客
05-20 154
js的增删改查
用 JS（JavaScript ）实现增删改查
zzvar的博客
04-24 7031
JS小例题学习内容：需求总结： 学习内容： 需求 用 JavaScript 实现简单增删改查 实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UT
麻烦使用JavaScript实现一个增删改查的功能
最新发布
02-26
好的，我可以为您提供一些 JavaScript 代码来实现增删改查的功能，以下是示例代码： 1. 添加数据功能： ``` // 在这里定义一个数组来保存数据 var data = []; // 定义一个函数来添加数据 function addData(item) ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值