广州建网站维护公司seo网站优化流程
思路：
-
这个练习是要通过超链接来删除对应的用户信息，既然是要通过超链接来删除数据，那么就要先获取a元素。通过getElementByTagName来获取，返回的是封装a元素的数组，对这个数组进行遍历，分别为每一个a元素绑定单击响应函数。
- 注意：点击超链接会跳转页面，可以在末尾return false来取消页面的跳转，或者在a标签中加入href="javascript:;"来取消点击超链接时的页面跳转。
-
要分别获取对应a元素的tr祖先元素，就得知道当前的a标签对应的数据，通过this来指明当前的函数，至于this的用法，前面的博客里面有，或者在网上也能找到。这里的this指的就是绑定了单击响应函数的当前a元素，响应函数时为谁绑定的，this就是谁。通过parentNode来获取祖先元素，父亲的父亲就是祖先。
-
通过tr来确定要删除用户的名字，通过confirm弹出框来进行内容提示，点击提示框中的确定则删除用户信息，点击提示框中的取消则不作任何修改。
练习代码及其每一步的详细解释如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="css/cdtest.css"/><title>Document</title><script type="text/javascript">window.onload = function(){/* 1.点击超链接，删除一个员工的信息 *///获取页面中所有的超链接元素var As = document.getElementsByTagName("a");//为每一个超链接绑定单击响应函数for (var i = 0; i < As.length; i++) {As[i].onclick = function(){/* 点击超链接，删除对应的那行用户的数据*///通过遍历得到的a元素获取当前的trvar tr = this.parentNode.parentNode;//这里我们点击的是哪个超链接，this就是谁//通过tr元素获取要删除的用户的名字var name = tr.getElementsByTagName("td")[0].innerHTML;//删除之前弹出提示框,如果用alert的话不管如何，对应的元素都会被删除掉// alert("是否要删除？");/* confirm用于弹出一个带有确认和取消按钮的提示框，需要一个字符串作为参数，该字符串将会作为提示文字显示，如果用户点击确认则返回true，点击取消则返回false */var flag = confirm("确认删除"+ name + "吗？");// //删除tr// tr.parentNode.removeChild(tr);//判断confirm的返回值，如果用户点击了确定，则执行删除操作，否则不执行删除操作if(flag){//删除tr对应用户的信息tr.parentNode.removeChild(tr);}/* 点击超链接或跳转页面，这个是超链接的默认行为，我们的操作不需要超链接出现默认 行为可以在超链接响应函数的最后return false来取消超链接跳转页面的默认行为或者在a标签中加入href="javascript:;"*/return false;//用来取消在点击超链接的时候自动跳转};}}</script>
</head>
<body><table id="employeeTable" cellspacing="0"><tr><th>Name</th><th>Email</th><th>Salary</th><th> </th></tr><tr><td>Tom</td><td>Tom@tom.com</td><td>3000</td><td><a href="deleteEmp?id=001">Delete</a></td></tr><tr><td>Jim</td><td>Jim@Jim.com</td><td>5000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>smith</td><td>Smith@smith.com</td><td>8000</td><td><a href="deleteEmp?id=003">Delete</a></td></tr></table><div id="formDiv"><h1>添加新员工</h1><table><tr><td class="word">name:</td><td class="inp"><input type="text" id="empName" name="empName"/></td></tr><tr><td class="word">email:</td><td class="inp"><input type="text" id="email" name="email"/></td></tr><tr><td class="word">salary:</td><td class="inp"><input type="text" id="salary" name="salary"/></td></tr><tr><td colspan="2" align="center"><button id="addEmpButton" value="abc">submit</button></td></tr></table></div>
</body>
</html>
以上代码对应的css样式如下：
*{margin: 0;padding: 0;
}
tr td th{margin: 0;padding: 0;
}
#employeeTable{margin: 50px auto;
}
#employeeTable td{border: 1px solid black;
}
#employeeTable th{border: 1px solid black;
}
#formDiv{width: 220px;border: 1px solid black;padding: 20px;margin: 0 auto;
}