JavaScript练习之添加纪录(简洁方法)
2017-02-11 19:59
821 查看
<!-- 作者:1377378268@qq.com 时间:2017-02-11 描述:当点击超链接后删除超链接所在一行的信息 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>添加删除记录练习</title> <link rel="stylesheet" type="text/css" href="css/css.css"/> <script type="text/javascript"> function delA(){ //点击超链接以后需要删除超链接所在的那行 //这里我们点击那个超链接this就是谁 //获取当前tr var tr = this.parentNode.parentNode; //获取要删除的员工的名字 var name = tr.firstChild.innerHTML; /* * confirm()用于弹出一个带有确认和取消按钮的提示框 * 需要一个字符串作为参数,该字符串将会作为提示文字显示出来 * 如果用户点击确认则会返回true,如果点击取消则返回false */ var flag = confirm("确认删除"+name+"吗?"); //如果用户点击确认 if(flag){ //删除tr tr.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 submitBut = document.getElementById("addEmpButton"); submitBut.onclick = function(){ //获取要添加的信息 var name = document.getElementById("empName").value; var email = document.getElementById("email").value; var salary = document.getElementById("salary").value; var tr = document.createElement("tr"); tr.innerHTML ="<td>"+name+"</td>"+ "<td>"+email+"</td>"+ "<td>"+salary+"</td>"+ "<td><a href='javascript:;'>Delete</a></td>"; var a =tr.getElementsByTagName("a")[0]; //向a中添加href属性 a.href = "javascript:;"; //为新添加的a再绑定一次单击响应函数 a.onclick = delA; //获取table var tab = document.getElementById("employeeTable"); //获取employeeTable中的tbody var tabBody = tab.getElementsByTagName("tbody")[0]; //将tr添加到表格中 tabBody.appendChild(tr); }; }; </script> </head> <body> <div id="bg"> <table id="employeeTable"> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> <th> </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="javascript:;">Delete</a></td> </tr> <tr> <td>Bob</td> <td>bob@tom.com</td> <td>10000</td> <td><a href="javascript:;">Delete</a></td> </tr> </table> </div> <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> </div> </body> </html>
CSS样式
@CHARSET "UTF-8";#total {width: 450px;margin-left: auto;margin-right: auto;}ul {list-style-type: none;}li {border-style: solid;border-width: 1px;padding: 5px;margin: 5px;background-color: #99ff99;float: left;}.inner {width: 400px;border-style: solid;border-width: 1px;margin: 10px;padding: 10px;float: left;}#employeeTable {border-spacing: 1px;background-color: black;margin: 80px auto 10px auto;//overflow: auto;}th,td {background-color: white;}#formDiv {width: 250px;border-style: solid;border-width: 1px;margin: 50px auto 10px auto;padding: 10px;}#formDiv input {width: 100%;}.word {width: 40px;}.inp {width: 200px;}
相关文章推荐
- JavaScript练习之添加纪录
- 关于HTML元素的Table控件javascript添加删除表中行列的方法!
- JavaScript--在Javascript中为String对象添加trim,ltrim,rtrim方法
- JavaScript中为String对象添加 trim / ltrim / rtrim 方法
- 在Javascript中为String对象添加trim,ltrim,rtrim方法
- 在javascript中实现OO,通过prototype为类型添加方法,好像继承
- 另一个为javascript中的table中添加控件的方法
- 在Javascript中为String对象添加trim,ltrim,rtrim方法
- 在Javascript中为String对象添加trim,ltrim,rtrim方法
- 关于HTML元素的Table控件javascript添加删除表中行列的方法!
- 自定义控件在AJAX的UpdatePanel中使用时添加javascript脚本方法
- 通过 prototype 为 JavaScript 的 String 对象添加方法(函数)
- [Javascript]给Javascript中的Array添加Remove方法
- 在Javascript中为String对象添加trim,ltrim,rtrim方法
- 在Javascript中为String对象添加trim,ltrim,rtrim方法
- Javascript中为String对象添加 Trim() 方法
- 在Javascript中为String对象添加trim,ltrim,rtrim方法
- 为 Javascript 数组添加一个 inArray 方法
- 在Javascript中为String对象添加trim,ltrim,rtrim方法
- 为javascript中的数组对象添加remove方法