<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的无语。。。。。
分享到：
相关推荐
【javascript-tree-menu-dTree】是一种基于JavaScript实现的树形菜单组件，主要用于网页中构建层级结构的导航菜单。这个组件能够帮助用户以清晰、交互性强的方式展示数据的层次关系，广泛应用于网站的侧边栏导航、...
- 一个显示结果的输入框，类型为`text`，并且初始化为0，设置为禁用状态，防止用户输入。 - 一系列按钮，分别代表数字0-9，基本运算符（加`+`、减`-`、乘`*`、除`/`），以及其他操作（如清除`C`、删除`backspace`、...
在网页开发过程中，特别是在使用JSP处理用户输入时，经常需要收集用户的多行输入。本篇文章将基于提供的标题、描述和部分内容，详细阐述如何利用JavaScript实现输入多行动态输入，并通过示例代码帮助读者更好地理解...
- **JS Animation**：动画效果的实现，介绍如何使用JavaScript实现动态效果。 - **JS Image Maps**：图像地图的创建，实现鼠标悬停时显示图像不同区域的功能。 - **JS Timing**：定时器的使用，如setInterval和...
JavaScript是这个计算器的核心，它处理用户输入、执行计算逻辑并更新显示结果。在JavaScript中，你可以为HTML元素添加事件监听器，当用户点击按钮时，对应的函数会被调用。例如，我们可以创建一个函数来处理数字的...
例如，`event.value` 可以获取或设置字段的值，`field.setValid()` 可以验证用户输入。 5. **动态内容更新** 通过JavaScript，可以实现PDF文档中的内容动态更新。例如，你可以根据用户的输入或时间改变文本、图像...
10. **jQuery库**：虽然现代JavaScript已经提供了原生API解决大部分需求，但jQuery仍然是许多特效实现的常用工具，它简化了DOM操作和事件绑定，使代码更简洁。 11. **框架与库**：React、Vue、Angular等前端框架...
虽然简短提到“搜索引擎”这个词，但可以推断书中可能包含通过JavaScript实现简单的搜索功能，比如根据用户输入关键词来过滤显示的结果。 ### 10. 选择器的使用 “Select Tag”可能指在JavaScript中操作HTML元素，...
《飞机大战-HTML-JavaScript-代码》是一个适合前端学习者探索和借鉴的项目，它以HTML为基础，结合CSS样式和JavaScript实现了一款动态的、带有特效的网页游戏。在这个项目中，我们可以深入理解到前端开发的核心技术...
在这个特定的项目中，"javaScript实现学生信息的增删改查，以及翻页"，我们关注的是如何利用JavaScript来管理数据，并构建一个具有用户友好的界面。 首先，让我们深入了解增删改查（CRUD）操作。CRUD是创建（Create...
当用户选择记住登录信息时，则会调用设置cookies的函数，将用户输入的用户名和密码保存到本地cookies中，以供下次使用。如果用户不想记住这些信息，则会调用删除cookies的函数，清除保存的用户名和密码。 以下是...
总结起来，"vue-tribute-demo"项目展示了如何在Vue.js应用中实现一个动态的@提及聊天室功能，包括动态获取提及用户列表、处理选中人员的数据以及删除已提及人员。它利用了Tribute.js库来简化开发流程，并结合Vue.js...
4. 表单：HTML表单用于收集用户输入，包括不同类型的输入控件和表单提交处理。 5. 结构化元素：如`<header>`, `<nav>`, `<section>`, `<article>`等，帮助组织网页内容。 CSS（层叠样式表）用于定义HTML元素的外观...
在JavaScript中，我们可以利用DOM API来创建、删除、修改或者查找这些节点，从而实现对网页内容的动态操作。 在这个"JavaScript-DOM实战案例"中，包含了两个主要的资源部分：`css`和`img`。 1. **CSS（Cascading ...
4. **表单验证**：当用户输入工人信息时，JavaScript可以进行前端验证，确保数据格式正确。 **CSS**（Cascading Style Sheets）负责网页的样式和布局。`css`文件中可能包含了定义表格样式、按钮样式以及其他界面...
- JavaScript通过事件机制实现用户交互，如点击按钮、提交表单等。 - 事件处理可以使用addEventListener和removeEventListener来添加和移除事件监听器。 8. **DOM操作**： - Document Object Model（DOM）是HTML...
通过获取用户输入，可以过滤出满足条件的行，只显示用户关心的数据。同时，JavaScript也能实现对表格数据的升序或降序排序，帮助用户更高效地浏览信息。 再者，JavaScript还可以用于实现表格的展开与折叠效果。比如...
5. **页面交互设计**：如何通过JavaScript实现如模态框、下拉菜单等常见的交互设计元素。 6. **响应式设计**：理解如何用JavaScript配合媒体查询，实现不同设备上的适应性布局和交互。 压缩包中的文件名如"OLTL2...
本文通过一个具体的案例——**JavaScript实现留言板添加删除留言**，展示了如何利用前端技术构建一个简单的交互式留言板系统。该案例的重点在于使用JavaScript来处理用户输入的数据，并在网页上动态地添加和删除这些...
- 表单验证：确保用户输入符合特定格式和要求。 - DOM操作：动态修改网页内容，如添加、删除或更新HTML元素。 - AJAX（异步JavaScript和XML）：实现页面的局部刷新，提高用户体验。 - 浏览器兼容性处理：处理...