JavaScript练习之添加纪录
2017-02-11 19:57
344 查看
<!-- 作者: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; //创建一个tr var tr = document.createElement("tr"); //创建4个td var nameTd = document.createElement("td"); var emailTd = document.createElement("td"); var salaryTd = document.createElement("td"); var aTd = document.createElement("td"); //创建一个a元素 var a = document.createElement("a"); //创建四个文本节点 var nameText = document.createTextNode(name); var emailText = document.createTextNode(email); var salaryText = document.createTextNode(salary); var delText = document.createTextNode("Delete"); //把文本节点添加到td中 nameTd.appendChild(nameText);emailTd.appendChild(emailText); salaryTd.appendChild(salaryText); //向a中添加文本 a.appendChild(delText); //将a添加到td中 aTd.appendChild(a); //将td添加到tr中 tr.appendChild(nameTd); tr.appendChild(emailTd); tr.appendChild(salaryTd); tr.appendChild(aTd); //向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> <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 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练习之添加纪录(简洁方法)
- JavaScript添加用户小练习
- 在Javascript中为String对象添加trim,ltrim,rtrim方法
- 为服务器控件添加javascript客户端事件
- javascript中如何通过被打开的窗体在opener窗体中添加option选项[zz]
- javascript中如何通过被打开的窗体在opener窗体中添加option选项
- 为html表单域添加属性实现表单的javascript验证
- javascript动态添加行的例子
- JAVASCRIPT 滚动字幕(支持添加多个)
- javascript动态添加无限级树状目录
- JavaScript实现DataGrid中添加CheckBox列(全选与否)
- JavaScript 关于动态添加表格行问题
- [JavaScript]给自己的网站添加简单文本日志
- javascript中如何通过被打开的窗体在opener窗体中添加option选项
- .net添加JAVASCRIPT代码
- 用Javascript动态添加和删除表格行
- 在Javascript中为String对象添加trim,ltrim,rtrim方法
- 通过 prototype 为 JavaScript 的 String 对象添加方法(函数)
- 为javascript的Array添加个has(value),remove(value),removeAt(index)方法