以往页面表单的増删改查、是通过连接数据库完成的。今天我们不用数据库,用纯JS来完成 。先为看一下效果图。
填加完后在最上面显示出来:
点击修改在中间显示当行的内容:
下面上代码 : 填加: //增加 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; //获取表格节点对象table var tusers = document.getElementById("tusers"); //创建<tr> var tr1 = document.createElement("tr"); //var cbk = document.createElement("td"); //创建<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 caozuo = document.createElement("td"); // cbk.appendChild(document.createTextNode("<input type='checkbox' name='cbk'/>")); //在创建是行填加子节点,内容是刚才填入表单中name的值班。相当于:<td>name的值</td> tname.appendChild(document.createTextNode(name)); tsex.appendChild(document.createTextNode(sex)); temail.appendChild(document.createTextNode(email)); tbir.appendChild(document.createTextNode(bir)); //创建<a> var udelete = document.createElement("a"); var uupdate = document.createElement("a"); udelete.setAttribute("href", "#"); uupdate.setAttribute("href", "#"); udelete.appendChild(document.createTextNode("删除|")); uupdate.appendChild(document.createTextNode("修改")); //填加到操作对应位置上 caozuo.appendChild(udelete); caozuo.appendChild(uupdate); //往行中添加:相当于<td>中填加<td> tr1.appendChild(tname); tr1.appendChild(tsex); tr1.appendChild(temail); tr1.appendChild(tbir); tr1.appendChild(caozuo); //获得<tbody>,把<tr>填加进去,再将<tbody>填中到<table>中 var tb = document.getElementById("tbody"); tb.appendChild(tr1); tusers.appendChild(tb); var tbody=document.getElementById("tbody"); var trs=tbody.getElementsByTagName("td");
下面上代码 :
填加:
删除代码:
udelete.onclick = function(){ tb.removeChild(udelete.parentNode.parentNode); }
修改代码:
uupdate.onclick = function(){ //先得到<tr>标签 var utr = uupdate.parentNode.parentNode; //所有子标签<tr> var uall = utr.childNodes; //将要修改的信息显示在另外一个表单中 document.getElementById("uname").value = uall[0].innerHTML; document.getElementById("usex").value = uall[1].innerHTML; document.getElementById("uemail").value = uall[2].innerHTML; document.getElementById("ubirthday").value = uall[3].innerHTML; //确认修改 var updateok = document.getElementById("updateOK"); updateok.onclick = function(){ uall[0].innerHTML = document.getElementById("uname").value; uall[1].innerHTML = document.getElementById("usex").value; uall[2].innerHTML = document.getElementById("uemail").value; uall[3].innerHTML = document.getElementById("ubirthday").value; } }
下次将实现分页显示
您还没有登录,请您登录后再发表评论
通过js实现cookies 的增加删除修改,解决chrome读为 undefine 的问题
js+html写的实现表格的动态增删改查和表单验证
数据库部分:创建表、增删改查语句的书写等。 前端部分:HTML、CSS、jQuery、JavaScript等。 编码顺序 添加项目需要使用的各种jar包 HTML 页面表单的编写 Apache方法的DBUtils编写 实体类的数据初始化(添加私有...
在.net模式下的vue.js后台数据增加、删除、修改、查询
原生JavaScript,对数据表格进行操作,使用DOM实现数据的动态操作,包括增加、删除、查询、修改。
JSP购物车增删查改.放入、清空、查看、返回
&最近因为一些原因,没有更博客,昨天老师布置了一个作业,用vue实现增删改查功能,想想这也不难,就做一下试试吧。 因为自己写的样式没有别人做的好,因此我想用现成的UI框架,一直也没用过Element,就干脆趁机学...
现在要通过js对表格进行动态的增删改查(只是内存操作即可): 首先,加载页面时用js加载3条初始化记录; 有一个增加记录的按钮,点击后弹出一个div层提供输入,要求各字段必须符合输入格式且不能为空: 用户名...
主要介绍了JS结合bootstrap实现基本的增删改查功能,需要的朋友可以参考下
struts2.1+hibernate3.1+spring2.0项目(增删改查)徐制作 该项目适合新手学习,里面包括普通的增删改查外,还有文件图片上传,javascript表单效验,信息查询
spring+mvc+mybatis+extjs整合 内含mysql数据库,很适合新手借鉴
使用antd实现表格增、删、编辑,分别基于react16.2和react16.3实现两种方式
Javascript操作select是表单中比较常见的,大家可以在网上搜索到很多的相关资料,接下来为大家详细介绍下,JS动态操作select中的各种方法,感兴趣的朋友可以参考下
1.以收货地址的增删改查为例 2.文件目录 js文件是逻辑控制,主要是它发送请求和接收数据, json 用于此页面局部 配置并且覆盖全局app.json配置, wxss用于页面的样式设置, wxml就是页面,相当于html <...
NULL 博文链接:https://1601844782.iteye.com/blog/2270007
使用React和Redux的表单变得简单
使用jquery与bootstrap实现了一个比较简单但功能齐全的增删改查功能的后台管理页面,虽然只是一个CRUD页面,但麻雀虽小五脏俱全,JS常用的功能都用到了,本例用原生的jquery与bootstrap配合使用,不考虑JS的重构性及...
系统后台采用ASP.NET MVC,使用到的技术点有,泛型,Razor语法,数据库增删改查,批量操作,cookie,ajax弹出层各种操作保存表单,图书借书和归还,报表查询基础,layui功能都已实现可二次开发多个功能 二、菜单功能,...
1、轻量级,dao层做了封装,将常见的操作封装在一个对象内 不需要写mapper接口,只要配置mapper.xml即可。 2、封装了可配置的Quartz定时器;分两个版本:一个基于xml的配置版,一个是读取SQL 3、轻量级缓存 4、页面...
相关推荐
通过js实现cookies 的增加删除修改,解决chrome读为 undefine 的问题
js+html写的实现表格的动态增删改查和表单验证
数据库部分:创建表、增删改查语句的书写等。 前端部分:HTML、CSS、jQuery、JavaScript等。 编码顺序 添加项目需要使用的各种jar包 HTML 页面表单的编写 Apache方法的DBUtils编写 实体类的数据初始化(添加私有...
在.net模式下的vue.js后台数据增加、删除、修改、查询
原生JavaScript,对数据表格进行操作,使用DOM实现数据的动态操作,包括增加、删除、查询、修改。
JSP购物车增删查改.放入、清空、查看、返回
数据库部分:创建表、增删改查语句的书写等。 前端部分:HTML、CSS、jQuery、JavaScript等。 编码顺序 添加项目需要使用的各种jar包 HTML 页面表单的编写 Apache方法的DBUtils编写 实体类的数据初始化(添加私有...
&最近因为一些原因,没有更博客,昨天老师布置了一个作业,用vue实现增删改查功能,想想这也不难,就做一下试试吧。 因为自己写的样式没有别人做的好,因此我想用现成的UI框架,一直也没用过Element,就干脆趁机学...
现在要通过js对表格进行动态的增删改查(只是内存操作即可): 首先,加载页面时用js加载3条初始化记录; 有一个增加记录的按钮,点击后弹出一个div层提供输入,要求各字段必须符合输入格式且不能为空: 用户名...
主要介绍了JS结合bootstrap实现基本的增删改查功能,需要的朋友可以参考下
struts2.1+hibernate3.1+spring2.0项目(增删改查)徐制作 该项目适合新手学习,里面包括普通的增删改查外,还有文件图片上传,javascript表单效验,信息查询
spring+mvc+mybatis+extjs整合 内含mysql数据库,很适合新手借鉴
使用antd实现表格增、删、编辑,分别基于react16.2和react16.3实现两种方式
Javascript操作select是表单中比较常见的,大家可以在网上搜索到很多的相关资料,接下来为大家详细介绍下,JS动态操作select中的各种方法,感兴趣的朋友可以参考下
1.以收货地址的增删改查为例 2.文件目录 js文件是逻辑控制,主要是它发送请求和接收数据, json 用于此页面局部 配置并且覆盖全局app.json配置, wxss用于页面的样式设置, wxml就是页面,相当于html <...
NULL 博文链接:https://1601844782.iteye.com/blog/2270007
使用React和Redux的表单变得简单
使用jquery与bootstrap实现了一个比较简单但功能齐全的增删改查功能的后台管理页面,虽然只是一个CRUD页面,但麻雀虽小五脏俱全,JS常用的功能都用到了,本例用原生的jquery与bootstrap配合使用,不考虑JS的重构性及...
系统后台采用ASP.NET MVC,使用到的技术点有,泛型,Razor语法,数据库增删改查,批量操作,cookie,ajax弹出层各种操作保存表单,图书借书和归还,报表查询基础,layui功能都已实现可二次开发多个功能 二、菜单功能,...
1、轻量级,dao层做了封装,将常见的操作封装在一个对象内 不需要写mapper接口,只要配置mapper.xml即可。 2、封装了可配置的Quartz定时器;分两个版本:一个基于xml的配置版,一个是读取SQL 3、轻量级缓存 4、页面...