`
- 浏览:
46156 次
- 性别:
- 来自:
河北
-
<!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">
<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>
名称
</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>
<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>
<td colspan="2" id="addu">
<input type="button" value="添加" onclick="addUser()" />
</td>
</tr>
<tr id="addu1">
<td colspan="2">
<input type="button" value="修改" id="upduser" />
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
<script>
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 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 users = document.getElementById("users");
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(aupdate);
toper.appendChild(adelete);
//往行中添加
tr1.appendChild(tname);
tr1.appendChild(tsex);
tr1.appendChild(temail);
tr1.appendChild(tbir);
tr1.appendChild(toper);
users.appendChild(tr1);
tusers.appendChild(users);
adelete.onclick = function() {
var tda = adelete.parentNode;
var trb = tda.parentNode;
users.removeChild(trb);
}
aupdate.onclick = function() {
document.getElementById("addu").style.display = "none";
document.getElementById("addu1").style.display = "block";
var use = aupdate.parentNode.parentNode;
var uses = use.childNodes;
document.getElementById("name").value = uses[0].innerHTML;
document.getElementById("sex").value = uses[1].innerHTML;
document.getElementById("email").value = uses[2].innerHTML;
document.getElementById("bir").value = uses[3].innerHTML;
var upUser = document.getElementById("upduser");
upUser.onclick = function() {
use.childNodes[0].innerHTML = document.getElementById("name").value;
use.childNodes[1].innerHTML = document.getElementById("sex").value;
use.childNodes[2].innerHTML = document.getElementById("email").value
use.childNodes[3].innerHTML = document.getElementById("bir").value
document.getElementById("addu1").style.display = "none";
document.getElementById("addu").style.display = "block";
}
}
}
</script>
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
JavaScript还可以与服务器进行通信,利用Ajax(Asynchronous JavaScript and XML)技术实现数据的增删改。通过XMLHttpRequest或现代浏览器的fetch API,可以发送HTTP请求到服务器,更新数据库,并获取最新的数据。...
在这个场景中,我们将深入探讨SSH框架如何实现基本的增删改操作,并结合页面美化和数据校验来提升用户体验。 首先,让我们从Struts2开始,这是一个基于MVC设计模式的Action驱动框架,负责处理用户请求并转发到相应...
文件名 "jquery写的增删改" 暗示这是一个完整的示例,可能包括 HTML、CSS 和 JavaScript 文件,你可以通过学习和运行这些代码来理解 jQuery 增删改的具体实现。 总结来说,jQuery 提供的强大功能使得网页中的数据...
ZTree是一款广泛应用于Web开发中的JavaScript树形控件,它具有丰富...总之,ZTree通过右键菜单实现了对树形数据的增删改功能,使得Web应用中的树形操作更加便捷,同时其高度定制化的特点为开发者提供了广阔的设计空间。
为了实现增删改功能,我们可以添加相应的Vue方法。例如,增加学生可以通过`push`方法添加到`students`数组中: ```javascript methods: { addStudent: function() { this.students.push({ id: this.students....
在本文中,我们将深入探讨如何使用Element-UI的Tree组件实现增删改的自定义功能。Element-UI是一个基于Vue.js的开源UI组件库,它提供了丰富的组件供开发者使用,其中包括Tree组件,用于展示层级关系的数据。在描述的...
#### 四、实现完整的增删改功能 为了让表格的增删改功能更加完整,我们需要实现以下细节: 1. **编辑功能完善**:除了检查是否选择了行之外,还需要实现让用户能够编辑选定行的功能。这可以通过显示/隐藏编辑表单...
通过动态添加或删除这些元素,我们可以实现表格内容的增删改。 CSS(Cascading Style Sheets)则负责美化页面,使表格看起来更加立体和吸引人。我们可以使用CSS选择器来定位特定的表格元素,然后设置边框、背景色、...
固定列通常通过CSS样式和JavaScript实现,例如使用`position: fixed`属性来锁定列的位置。在jQuery中,可以结合CSS选择器和DOM操作来实现这一效果。 jQuery是一个强大的JavaScript库,提供了一系列方便的API来简化...
本文将详细讲解如何利用jQuery实现在不刷新界面的情况下对数据库进行增删改操作,同时实现界面的联动效果。 首先,我们要了解jQuery的核心特性。jQuery通过选择器(如$("#id")或$(".class"))来选取DOM元素,然后...
在这个项目中,我们关注的是如何利用JavaScript实现购物车的增、删、改以及商品的单选操作,这些都是电商网站必备的功能。 首先,我们要理解JavaScript的基本语法和数据类型,它是ECMAScript的一个实现,提供了变量...
开发者可以下载这个文件夹,通过Visual Studio等IDE运行项目,查看和学习如何在MVC中集成Ajax实现增删改功能的具体实现。 总结,此压缩包提供了一个基于ASP.NET MVC和Ajax的CRUD操作示例,对于想要学习或提升Web...
在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,允许在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。AJAX的核心是利用JavaScript异步地与服务器进行交互,...
在实现“使用zTree框架完成树形框架链接到数据库实现增删改”的过程中,主要涉及以下几个步骤: 1. **数据获取**:首先,需要从数据库获取树形结构的数据。通常,这可以通过执行SQL查询完成,将结果转化为JSON格式...
本示例“jquery实现的无刷新分页增删改”正是将jQuery的强大功能应用于数据管理,提供了一种高效且用户体验良好的解决方案。 首先,我们来理解“无刷新分页”。传统的网页分页通常需要用户点击分页按钮后,页面重新...
在前端,我们可以使用HTML、CSS和JavaScript实现,后端则可能涉及到数据库的操作。 创建树形菜单的过程通常包括以下几个步骤: 1. 设计数据模型:定义菜单节点的数据结构,通常包括ID、父ID、名称、子节点等属性。 ...
总之,建立一个简单的用户登录系统并实现增删改功能,涉及数据库连接、SQL操作、用户验证和安全性措施。而GgWeb这个项目正是围绕这些概念进行的,它提供了实现这些功能的具体代码示例,对于学习和实践数据库操作具有...
本教程将探讨如何实现通用的Web表格的增删改操作,包括前端交互与后端处理,以及提供源码以供参考。 一、前端交互 前端交互主要涉及到HTML表格的创建、JavaScript或jQuery对表格元素的操作,以及AJAX与后端服务器的...