JavaScript练习之删除记录
来源：互联网 发布：0基础学java好学吗 编辑：程序博客网 时间：2024/05/16 09:33
<!--作者：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">window.onload = function(){//获取页面中所有的超链接var allA = document.getElementsByTagName("a");for(var i=0 ;i<allA.length ;i++){//为每一个超链接都绑定点击事件allA[i].onclick = function(){//点击超链接以后需要删除超链接所在的那行//这里我们点击那个超链接this就是谁//获取当前trvar tr = this.parentNode.parentNode;//获取要删除的员工的名字var name = tr.firstChild.innerHTML;/* * confirm()用于弹出一个带有确认和取消按钮的提示框 * 需要一个字符串作为参数，该字符串将会作为提示文字显示出来 * 如果用户点击确认则会返回true，如果点击取消则返回false */var flag = confirm("确认删除"+name+"吗?");//如果用户点击确认if(flag){//删除trtr.parentNode.removeChild(tr);}/* * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为， * 但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为 */return false;};}};</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></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;}
0 0
