DOM增删改,js日历综合案例实现 效果图:
实现此图功能的源代码:
Html代码:
addUser.html 显示有的用户界面 名称 性别 邮箱 出生日期 操作 用户名: 性别: 男 女 邮箱: 出生日期:
Java源代码
window.onload = function (){ document.getElementById("addu1").style.display="no ne"; } 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 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="non e"; document.getElementById("addu1").style.display="bl ock"; var utr = aupdate.parentNode.parentNode; var utrs= utr.childNodes; document.getElementById("name").value=utrs[1].inne rHTML; document.getElementById("sex").value=utrs[2].inner HTML; document.getElementById("email").value=utrs[3].inn erHTML; document.getElementById("bir").value=utrs[4].inner HTML; 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="no ne"; document.getElementById("addu").style.display="blo ck"; } } } function select1(oper){ var arr=document.getElementsByName("chbk"); for(var i=0;i
日历控件 wpCalendar.js
新建一个js文件 下载解压包,复制代码。
发表评论
-
java字符串处理
2012-07-06 09:51 639substring() 它有两种形式,第一种是:Stri ... -
经常用到的提取手机、电话、Email联系方式的几个java正则表达式
2012-07-06 09:44 1117经常用到的提取手机、电话、Email联系方式的几个ja ... -
java中的正则表达式详解
2012-07-06 09:37 1278转自:http://gstarwd.i ... -
MTK修改音乐播放器
2012-07-06 09:29 737目标文件:Resource_audply_skins.c ... -
构建自定义组件
2012-07-03 13:42 808构建自定义组件 ... -
构建自定义组件
2012-07-03 12:15 644构建自定义组件 ... -
Flex文件上传
2012-07-02 10:09 664今天花了一点时间 ... -
Changing the layout direction of a form item in Flex
2012-07-02 10:09 610The following example shows h ... -
Flex 与 JavaScript 实现交互!!
2012-07-02 10:09 706.style{ paddin ... -
OpenCms7.5.3发布
2012-07-01 09:26 8202010年8月18日,OpenCms7.5.3发布。 ... -
挨踢求职之旅
2012-07-01 09:26 467大学的时候,学的 ... -
Ext 4 概述(六)之Grid
2012-07-01 09:25 593这次升级Ext 4全部 ... -
一些免费,甚至开源的.net开发工具
2012-07-01 09:25 1184一些免费,甚至 ... -
AS类库推荐
2012-06-30 11:12 597AS类库推荐 2011年11月17日 TweenLite ... -
Flex 收藏
2012-06-30 11:12 577Flex 收藏 2010年06月15日 flex官方网址 ... -
as3 字符处理函数
2012-01-20 02:25 1449as3 字符处理函数 2011年04月22日 原地址:h ... -
js+正文规则 高亮搜索关键字(二)
2012-01-20 02:24 634js+正文规则 高亮搜索关键字(二) 2010年11月16日 ... -
常用的正则表达式
2012-01-20 02:24 601常用的正则表达式 2010年09月09日 常用表达式: ... -
四(4)寒假作业
2012-01-19 10:14 617四(4)寒假作业 2012年01 ... -
《墨水心》(Inkheart)
2012-01-19 10:14 513《墨水心》(Inkheart) 2012年01月12日 ...
相关推荐
04.dom增删改.html
原生JavaScript,对数据表格进行操作,使用DOM实现数据的动态操作,包括增加、删除、查询、修改。
尚硅谷_教学课件_JavaScriptDOM,PPT。
asp.net网络编程必备js和dom用法案例
Javascript_Dom操作案例 总结了一些javascript对DOM操作的案例,希望对大家有所帮助
NULL 博文链接:https://421728862.iteye.com/blog/2186616
主要介绍了JavaScript 实现HTML DOM增删改查操作,结合实例形式分析了JavaScript针对HTML DOM元素增删改查常见操作技巧与使用注意事项,需要的朋友可以参考下
最新版的dom4j,附带了一个简单的增删改查
dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览...
主要介绍了js中script的上下放置区别,Dom的增删改创建操作,结合实例形式分析了JavaScript基本dom事件、script在head和body中放置的区别、以及Dom的增删改创建等相关操作技巧,需要的朋友可以参考下
第一天创建博客,dom、选择器分类、元素家族关系、节点的增删改笔记、用markdown创建简单的表。若有问题请指正,非常感谢!!!抱拳
使用Dom4j对XML文档做增删改查,其中XML充当数据库角色,案例使用分层思想
原生js操作dom实现上下左右移动.docx
Java用dom4j对xml进行增删改查操作,提供这个资料给大家参考。
经典之作《javascript dom编程艺术》源码。通过一个实际案例,讲述了原生的javascript操作dom的使用方法,以及操作dom中应该注意的一些事项。
实现使用JavaScript DOM 操作实现网页局部刷新
根据JavaScript DOM 编程艺术这本书之前所介绍的内容,做的本书最后的一个综合简单示例