代碼要求都實現(xiàn)了,希望能幫到你們
<!DOCTYPE html>
<html>
?<head>
? <title> new document </title>?
? <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>??
? <style type="text/css">
?????? #select{
?????????? background:#f2f2f2;
?????? }
? </style>
?
? <script type="text/javascript">
? //添加一行函數(shù)
??? function add(){
???????? var Table=document.getElementById("table");
???????? var newnode=document.createElement("tr");
???????? var num=prompt("請輸入需學(xué)號:");
???????? var name=prompt("請輸入名字:");
???????? var first=document.createElement("td");
???????? var second=document.createElement("td");
???????? var third=document.createElement("td");
???????? var a=document.createElement("a");
???????? a.innerHTML="刪除";
???????? a.href="javascript:;";
???????? first.innerHTML=num;
???????? second.innerHTML=name;
???????? third.appendChild(a);
???????? newnode.appendChild(first);
???????? newnode.appendChild(second);
???????? newnode.appendChild(third);
???????? Table.appendChild(newnode);
???????? onload1();
???????? onload2();
???? }
??????????
???? // 創(chuàng)建刪除函數(shù)
????? function onload1(){
???????? var Table=document.getElementById("table");
???????? var Del=Table.getElementsByTagName("a");
???????? for(var i=0;i<Del.length;i++)
???????? {
???????????? Del[i].onclick=function()
???????????? {
???????????????? var fat=this.parentNode;
???????????????? var grad=fat.parentNode;
???????????????? var ggrad=grad.parentNode;
???????????????? var message=confirm("確定刪除?");
???????????????? if(message==true){
??????????????????? var de=ggrad.removeChild(grad);
???????????????? }
???????????? }
???????? }
???? }
???? //鼠標滑過的背景顏色
???? function onload2(){
??????? var trs=document.getElementsByTagName("tr");
???????
????????? for(var i=0;i<trs.length;i++)
????????? {
????????????? trs[i].onmouseover=function()
????????????? {
????????????????? //alert(trs.length);
????????????????? this.id="select";
????????????? }
????????????? trs[i].onmouseout=function()
????????????? {
????????????????? this.id="";
????????????? }
????????? }
??? }
??? window.onload=function()//以此來實現(xiàn)雙重加載
??? {
??????? onload1();
??????? onload2();
??? }
?
???? </script>
?</head>
?<body>
??? <table border="1" width="50%" id="table">
??? <tr>
??<th>學(xué)號</th>
??<th>姓名</th>
??<th>操作</th>
??? </tr>?
??? <tr>
??<td>xh001</td>
??<td>王小明</td>
??<td><a href="javascript:;" >刪除</a></td>?? <!--在刪除按鈕上添加點擊事件? -->
??? </tr>
??? <tr>
??<td>xh002</td>
??<td>劉小芳</td>
??<td><a href="javascript:;" >刪除</a></td>?? <!--在刪除按鈕上添加點擊事件? -->
??? </tr>?
??? </table>
??? <input type="button" value="添加一行" onclick="add()" />?? <!--在添加按鈕上添加點擊事件? -->
?</body>
</html>
2018-08-04
你好!我有一個疑問,在刪除函數(shù)那邊,為什么一定要從標簽a開始向上獲取父節(jié)點然后才能刪除tr。
我嘗試了用td向上但是沒有效果。