Js removeChild、addChild

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>添加删除记录练习升级</title><link rel="stylesheet" type="text/css" href="ex_2_style/css.css" /><script type="text/javascript">/** 删除tr的响应函数*/function delA() {//点击超链接以后需要删除超链接所在的那行//这里我们点击那个超链接this就是谁//获取当前trvar tr = this.parentNode.parentNode;//获取要删除的员工的名字//var name = tr.getElementsByTagName("td")[0].innerHTML;var name = tr.children[0].innerHTML;//删除之前弹出一个提示框/** confirm()用于弹出一个带有确认和取消按钮的提示框*     需要一个字符串作为参数，该字符串将会作为提示文字显示出来* 如果用户点击确认则会返回true，如果点击取消则返回false*/var flag = confirm("确认删除" + name + "吗?");//如果用户点击确认if(flag) {//删除trtr.parentNode.removeChild(tr);}/** 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，*   但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为*/return false;};window.onload = function() {/** 点击超链接以后，删除一个员工的信息*///获取所有额超链接var allA = document.getElementsByTagName("a");//为每个超链接都绑定一个单击响应函数for(var i = 0; i < allA.length; i++) {allA[i].onclick = delA;}/** 添加员工的功能*   - 点击按钮以后，将员工的信息添加到表格中*///为提交按钮绑定一个单击响应函数var addEmpButton = document.getElementById("addEmpButton");addEmpButton.onclick = function() {//获取用户添加的员工信息//获取员工的名字var name = document.getElementById("empName").value;//获取员工的email和salaryvar email = document.getElementById("email").value;var salary = document.getElementById("salary").value;//alert(name+","+email+","+salary);/**  <tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="javascript:;">Delete</a></td></tr>需要将获取到的信息保存到tr中*///创建一个trvar tr = document.createElement("tr");//设置tr中的内容tr.innerHTML = "<td>"+name+"</td>"+"<td>"+email+"</td>"+"<td>"+salary+"</td>"+"<td><a href='javascript:;'>Delete</a></td>";//获取刚刚添加的a元素，并为其绑定单击响应函数                var a = tr.getElementsByTagName("a")[0];a.onclick = delA;//获取tablevar employeeTable = document.getElementById("employeeTable");//获取employeeTable中的tbodyvar tbody = employeeTable.getElementsByTagName("tbody")[0];//将tr添加到tbodye中tbody.appendChild(tr);/*tbody.innerHTML += "<tr>"+"<td>"+name+"</td>"+"<td>"+email+"</td>"+"<td>"+salary+"</td>"+"<td><a href='javascript:;'>Delete</a></td>"+"</tr>";*/};};</script></head><body><table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th>&nbsp;</th></tr><tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="javascript:;">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="deleteEmp?id=003">Delete</a></td></tr></table><div id="formDiv"><h4>添加新员工</h4><table><tr><td class="word">name: </td><td class="inp"><input type="text" name="empName" id="empName" /></td></tr><tr><td class="word">email: </td><td class="inp"><input type="text" name="email" id="email" /></td></tr><tr><td class="word">salary: </td><td class="inp"><input type="text" name="salary" id="salary" /></td></tr><tr><td colspan="2" align="center"><button id="addEmpButton">Submit</button></td></tr></table></div></body></html>

结果:

Js removeChild、addChild相关推荐

[转] 小结js屏幕、浏览器、页面大小（三）———拖拽
小结js屏幕.浏览器.页面大小(三)---拖拽 (据说今天提前一个小时下班,哦耶...马上过年了,先给大家拜个年,祝大家新年快乐,龙年大吉...) 续上一篇,在之前的再次扩展了几个方法,本次扩展的主要 ...
关于FlexPaper 2.1.2版本二次开发 Logo 、打印、搜索、缩略图、添加按钮、js交互、右键菜单等相关问题...
原文:关于FlexPaper 2.1.2版本二次开发 Logo .打印.搜索.缩略图.添加按钮.js交互.右键菜单等相关问题先废话几句.最近用到文档在线浏览功能,之前用的是print2flash( ...
js复制、粘贴完整实例代码
前端哥最近在做在线工具箱,用到了js复制.粘贴的功能,刚好现在有时间就记录下来,避免将来需要用到时候随机可查阅,同时也希望帮助到各位正在学习的前端小伙伴们前端哥用到的是浏览器自带clipboard ...
js添加、删除DOM元素
js添加.删除DOM元素通过demo来熟悉js添加.删除DOM元素,下面是html代码以及在浏览器中的效果: HTML <ul class="list"><li ...
【前端】JS复习、巩固
参考:https://www.jianshu.com/p/b61a680d5c14 一.行为层(JavaScript) JavaScript 一门弱类型脚本语言,其源代码在发往客户端运行之前不需经过编 ...
Fort.js – 时尚、现代的表单填写进度提示效果
Fort.js 是一款用于时尚.现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,使用非常简单.提供了Default.Gradi ...
js 变量、函数提升
js 变量.函数提升先简单理解下作用域的概念,方便对变量与函数提升的概念的理解 function foo() {var x = 1;if (x) {var x = 2;}console.log(x) ...
js检测、控制表单输入必须为中文
js检测.控制表单输入必须为中文 <html> <head> <meta http-equiv="content-Type" content=&quo ...
利用Console来调试JS程序、Console用法总结
利用Console来调试JS程序.Console用法总结(1) 一 .什么是 Console Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console ...

Js removeChild、addChild

Js removeChild、addChild相关推荐

最新文章

热门文章