<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>js操作dom对象实例</title>
</head>
<script language="javascript">
//内存中保存用户ID的变量
var userID=0;
//在页面上添加用户的函数<br />
function addNewUser(userName){
//取得输入的用户名
userName=document.getElementById("userName").value;
if(userName==""){
window.alert("请输入用户名");
return;
}
//用户ID自增,保持唯一
userID++;
//创建一个新行
var row=document.createElement("tr");
//注意这句:标识后面删除时dom对象的唯一ID,ID确定后不受全局变量userID的影响
var ID=userID+userName;
row.setAttribute("id",ID);
//加入ID列
var cell=document.createElement("td");
cell.appendChild(document.createTextNode(userID));
row.appendChild(cell);
//加入用户名列
var cell1=document.createElement("td");
cell1.appendChild(document.createTextNode(userName));
row.appendChild(cell1);
//加入删除才操作列
var deleteButton=document.createElement("input");
deleteButton.setAttribute("type","button");
deleteButton.setAttribute("value","删除");
//设置删除按钮用的js函数:
deleteButton.onclick=function(){deleteUser(ID);};
cell=document.createElement("td");
cell.appendChild(deleteButton);
row.appendChild(cell);
//将行加入到表格中<br />
document.getElementById("userTable").appendChild(row);
//清空输入框
document.getElementById("userName").value="";
}
//删除表格中用户数据的函数
function deleteUser(id){
if(confirm("确认要删除用户吗? "+id)){
var rowToDelete=document.getElementById(id);
var userList=document.getElementById("userTable");
for(var i=0;i<userList.size;i++){
alert(userList.attributes);
}
//从表格中移除用户数据行
userList.removeChild(rowToDelete);
}
}
</script>
<body>
<B>用户信息管理</B><br>
<input id="userName" type="text" size="15" />
<input type="button" name ="addUser" value="增加用户" onClick="addNewUser();"/>
<table border="1">
<tr>
<td>用户ID</td>
<td>用户名字</td>
<td>操作</td>
</tr>
<tbody id="userTable"></tbody>
</table>
</body>
</html>
初学js,领略到了js变量的强大,谨以此代码纪念一下对js的无语。。。。。
分享到:
相关推荐
1. 前端页面设计:采用HTML、CSS、JavaScript等技术,实现用户友好、美观的前端页面。 2. 后端逻辑实现:采用PHP语言,通过封装函数、类等技术,实现系统的各项功能。 3. 数据库设计和管理:采用MySQL数据库技术,...
有关如何使用纯JavaScript初始化和使用插件的信息,请参见下文。 如果您要坚持使用jQuery版本,现在有一个单独的jQuery包装版本。国际电话输入 一个用于输入和验证国际电话号码JavaScript插件。 它将标记下拉列表...
练习和学习javascript基本功能和高级功能 1. AJAX-Vallina Javascript 注意力 If you want to run this application, Please replace and use your own API service! 。 GET XMLHttpRequest POST XMLHttpRequest 2...
库 - Javascript Library in JavaScript 是一个实践项目,包括用户输入功能和管理动态 DOM 操作。我们使用 Javascript、HTML5、CSS3、Bootstrap 来实现它实时链接演示内置HTML5 CSS3 引导程序JavaScript入门要启动并...
外一篇 用javascript改变onclick调用的函数 用JavaScript加密保护网站页面 用Javascript检测网速的方法 用Javascript评估用户输入密码的强度 用JavaScript实现仿Windows关机效果 用javascript实现...
动态生成页面内容: 使用 JavaScript 动态生成网页内容,例如根据用户输入的内容,实时显示搜索结果。 倒计时器: 编写 JavaScript 代码实现一个简单的倒计时器,用于显示网页上的倒计时效果。 TODO 列表: 使用 ...
在前台应用进我们经常会碰到要删除用户输入的字符中的空格的问题,下面我们来介绍一下javascript中使用正则表达式实现删除字符串中的空格方法
2. JavaScript:在本项目中,我们将使用JavaScript来创建交互式的用户界面,并处理用户输入和输出。 3. SQL Server数据库:在本项目中,我们将使用SQL Server数据库来存储和管理学生信息,包括学生基本信息、成绩、...
在这个应用程序中,用户可以输入车牌号码来查询相关的交通违章记录,也可以学习交通规则和安全知识。该应用程序将提供用户友好的界面和方便的操作,以满足用户的需求。 该系统将具有以下功能: - 用户可以注册和...
1.8 JavaScript和事件 9 1.9 标准化JavaScript和W3C 11 1.9.1 JavaScript对象 12 1.9.2 文档对象模型 12 1.10 关于浏览器 13 1.10.1 JavaScript的版本 14 1.10.2 你的浏览器遵循标准吗 16 1.10.3 ...
用户输入ID和密码,通过服务器验证方可运行,否则显示消息提示。 2.网站前台功能: 浏览:博主个人信息、文章; 发表:留言,评论 3.网站后台功能: 用户管理模块:实现用户信息及密码的修改 博文的分类...
16.3 判断用户输入是否为中文 16.4 验证列表框中的值是否重复 16.5 检测输入框的统一方法 16.6 Email的验证 16.7 不使用正则验证IP地址 16.8 IP地址输入框 16.9 判断变量是否已经定义 16.10 判断方法是否已经定义 ...
1.11.html 使用JavaScript实现的获取当前详细日期时间信息的数字时钟。 1.12.html 使用JavaScript实现的浏览器地震效果。 common.js 实现数据检验的独立的.js文件。 第2章(\c02) 实例描述:学习...
JavaScript:定义行为和动作 (基于对象和事件驱动的客户端脚本语言;也是一种广泛应用于客户端Web开发的脚本语言) 基于对象:网页中的一切元素都是假象!不需要new,即可直接使用 事件驱动:JavaScript的执行都是...
16.3 判断用户输入是否为中文 16.4 验证列表框中的值是否重复 16.5 检测输入框的统一方法 16.6 Email的验证 16.7 不使用正则验证IP地址 16.8 IP地址输入框 16.9 判断变量是否已经定义 16.10 判断方法是否已经定义 ...
实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用图片实现质感导航条 72 1.9 下拉菜单式导航条 73 实例047 二...
数据库技术:采用MySQL作为数据库管理系统,存储用户信息和二手物品数据。 安全性考虑:使用HTTPS协议进行数据传输,确保数据的安全性;对用户密码进行加密存储;对用户输入进行过滤和验证,防止SQL注入等安
也就是管理员对于用户信息所具有的管理功能,该功能不仅仅可以再次添加后台用户,即输入账号、密码和角色,其中用户角色分为用户和管理员,同时在后台用户管理中可以查看,删除个人用户信息等操作。球场管理中的数据...
在领养功能方面,系统提供了一个领养申请的界面,用户可以填写自己的个人信息和领养意向,提交给系统管理员进行审核。管理员可以在后台查看用户的申请信息,并根据情况决定是否批准领养申请。一旦领养申请被批准,...
1、管理菜品信息:针对用户发布的菜品信息在线查询并完成推荐操作,对需要删除的菜品信息在线删除。 2、管理菜品菜系:管理员在录入菜品信息时,需要划分菜系,所以需要设计菜系的动态管理。 3、注册的管理:用户...