DOM增删改,js日历综合案例实现
效果图:
实现此图功能的源代码：
Html代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>addUser.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/wpCalendar.js">
</script>
</head>
<body>
<div align="center" id="div">
<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" onclick="select1(1)"/>
</th>
<th>
名称
</th>
<th>
性别
</th>
<th>
邮箱
</th>
<th>
出生日期
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody id="users">
</tbody>
</table>
</div>
<div style="border: 1px blue solid;">
<form>
<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="点击看我"
onclick="showCalendar(this,document.all.bir)">
</td>
</tr>
<tr id="addu">
<td colspan="2">
<input type="button" value="添加" onclick="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>
</html>
Java源代码
<!--EndFragment--><!--EndFragment-->
<script type="text/javascript">
window.onload = function (){
document.getElementById("addu1").style.display="none";
}
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="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";
}
}
}
function select1(oper){
var arr=document.getElementsByName("chbk");
for(var i=0;i<arr.length;i++){
switch(oper){
case 1:
arr[i].checked=oper;
break;
}
}
}
</script>
日历控件wpCalendar.js
新建一个js文件 下载解压包，复制代码,。
<!--EndFragment-->
- 大小: 62.7 KB
分享到：
相关推荐
04.dom增删改.html
3. **逻辑**：JavaScript部分，实现日历的动态行为，如显示/隐藏日历，切换月份，选择日期等。 在描述中提到，示例代码可能支持两种编码格式：UTF-8和GBK。UTF-8是一种国际通用的字符编码标准，能表示世界上几乎...
在“尚硅谷_教学课件_JavaScriptDOM”中，我们可以期待学习到关于DOM的基本概念、DOM树的构建以及如何利用JavaScript操作DOM元素的方法。 首先，DOM（Document Object Model）是一种标准，它将网页内容表示为一个...
JavaScript还可以与服务器进行通信，利用Ajax（Asynchronous JavaScript and XML）技术实现数据的增删改。通过XMLHttpRequest或现代浏览器的fetch API，可以发送HTTP请求到服务器，更新数据库，并获取最新的数据。...
本话题主要探讨如何利用原生JavaScript和DOM来实现数据表格中的动态增删查改功能，这对于前端开发来说是一项基本且重要的技能。 1. **创建数据表格** - 使用`<table>`元素创建表格结构，包括`<thead>`定义表头，`...
在这个场景中，我们将深入探讨SSH框架如何实现基本的增删改操作，并结合页面美化和数据校验来提升用户体验。 首先，让我们从Struts2开始，这是一个基于MVC设计模式的Action驱动框架，负责处理用户请求并转发到相应...
标题"jquery写的增删改"指的是使用 jQuery 实现的数据表或列表的动态操作，即添加（Add）、删除（Delete）和修改（Modify）功能。这些功能在网页应用中十分常见，特别是在处理用户交互和数据管理时。 jQuery 提供了...
在本项目"html+css+js表格动态增删改与xml加载与保存"中，我们将深入探讨如何利用这些技术实现一个功能丰富的表格应用。 首先，HTML（HyperText Markup Language）用于定义页面的基本结构。在创建动态表格时，我们...
标题中的“DOM对标签的增删改”指的是在Web开发中使用Document Object Model（DOM）来操作HTML或XML文档中的元素。DOM是一种编程接口，它允许开发者通过JavaScript或其他支持的语言来动态更新、添加和删除页面内容。...
在这个主题中，我们主要关注的是“js日历 12种js日历”，这显然是一份包含了多种不同实现方式的JavaScript日历组件集合。 1. **日历组件的基本概念** 日历组件是网页中常见的交互元素，它允许用户选择日期，通常...
JavaScript 是一种轻量级的客户端脚本语言，常用于实现网页的交互性，而 DOM（Document Object Model）则是网页内容的一种结构化表示，允许 JavaScript 通过编程方式操作 HTML 或 XML 文档。 在 JavaScript 中，`F1...
本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可...
在这个项目中，我们关注的是如何利用JavaScript实现购物车的增、删、改以及商品的单选操作，这些都是电商网站必备的功能。 首先，我们要理解JavaScript的基本语法和数据类型，它是ECMAScript的一个实现，提供了变量...
在提供的文件名中，"calendar.html"可能是包含日历控件的HTML页面，而"iptext.js"很可能是用来实现日历功能的JavaScript脚本。通过分析这两个文件，我们可以深入了解这个日历控件的具体实现细节，包括具体的DOM操作...
总结一下，这个“jquery实现的无刷新分页增删改”项目展示了如何利用jQuery的Ajax、DOM操作和事件处理功能，结合后台API，构建一个无需刷新整个页面即可进行数据操作的前端应用。这种技术在现代Web应用中十分常见，...
在这个“Javascript_Dom操作案例”中，我们将深入探讨如何利用JavaScript有效地操纵DOM元素，提升用户体验并实现动态网页功能。 1. **DOM基本概念**： DOM是一种标准，用于表示HTML或XML文档的树形结构。每个节点...
总之，使用原生JavaScript实现日历组件是一种很好的实践，它可以帮助开发者提升对DOM操作、事件处理和日期对象的理解。而通过一行代码实现的这种高效方法，更是体现了JavaScript的灵活性和强大性。对于初学者来说，...
本教程将探讨如何实现通用的Web表格的增删改操作，包括前端交互与后端处理，以及提供源码以供参考。 一、前端交互 前端交互主要涉及到HTML表格的创建、JavaScript或jQuery对表格元素的操作，以及AJAX与后端服务器的...