                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進(jìn)階篇

在這里發(fā)一個(gè)相對(duì)完整而且整齊的

<!DOCTYPE html>
<html>
?<head>
? <title> new document </title> ?
? <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>? ?
? <script type="text/javascript">
?
????? window.onload = function (){
???????????????? ?
???? // 鼠標(biāo)移動(dòng)改變背景,可以通過給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來改變所在行背景色。
????? var tr=document.getElementsByTagName("tr");
????? for (var i=0;i<tr.length;i++){
????????? tr[i].setAttribute("onmouseover","javascript:this.style.backgroundColor='#f2f2f2'");
????????? tr[i].setAttribute("onmouseout","javascript:this.style.backgroundColor='#fff'")
????? }
?? ? }
??? ?
????? // 編寫一個(gè)函數(shù)，供添加按鈕調(diào)用，動(dòng)態(tài)在表格的最后一行添加子節(jié)點(diǎn)；
???? function addrow(){
???????? var table=document.getElementById("table");
???????? var newtr=document.createElement("tr");
???????? var newid=document.createElement("td");
???????? var newname=document.createElement("td");
???????? var newope=document.createElement("td");
???????? var newa=document.createElement("a");
???????? newid.innerHTML=prompt("input id","");
???????? newname.innerHTML=prompt("input name","")
???????? newa.setAttribute("href","javascript:void(0));");
???????? newa.setAttribute("onclick","deleterow(this)");
???????? newa.innerHTML="刪除";
???????? newope.appendChild(newa);
???????? newtr.appendChild(newid);
???????? newtr.appendChild(newname);
???????? newtr.appendChild(newope);
???????? table.appendChild(newtr);
???????? window.onload();
???? }
???? // 創(chuàng)建刪除函數(shù)
???? function deleterow(delnode){
???????? var thisrow=delnode.parentNode.parentNode;
???????? var par=thisrow.parentNode;
???????? var nodelist=par.childNodes;
???????? for (var i=0;i<nodelist.length;i++)
???????? {
??????????? if (nodelist[i].nodeType=="1")
??????????? {
??????????????? if (nodelist[i].childNodes[1].innerHTML == thisrow.childNodes[1].innerHTML)
??????????????? par.removeChild(nodelist[i]);
??????????? }
???????? }
???? }
?

? </script>
?</head>
?<body>
?? ??? <table border="1" width="50%" id="table">
?? ??? <tr>
?? ??? ?<th>學(xué)號(hào)</th>
?? ??? ?<th>姓名</th>
?? ??? ?<th>操作</th>
?? ??? </tr> ?

?? ??? <tr>
?? ??? ?<td>xh001</td>
?? ??? ?<td>王小明</td>
?? ??? ?<td><a href="javascript:void(0));" onclick="deleterow(this)">刪除</a></td>?? 
?? ??? </tr>

?? ??? <tr>
?? ??? ?<td>xh002</td>
?? ??? ?<td>劉小芳</td>
?? ??? ?<td><a href="javascript:void(0));" onclick="deleterow(this)">刪除</a></td>?? 
?? ??? </tr> ?

?? ??? </table>
?? ??? <input type="button" value="添加一行" onclick="addrow()" />?? 
?</body>
</html>

慕絲4883087

2019-02-15

源自：JavaScript進(jìn)階篇 9-22

關(guān)注問題我要回答

914

操作

收起

3 回答

慕萊塢9076050
2019-03-18

麻煩能解釋一下這段嗎？
? ?// 創(chuàng)建刪除函數(shù)?
???? function deleterow(delnode){
???????? var thisrow=delnode.parentNode.parentNode;
???????? var par=thisrow.parentNode;
???????? var nodelist=par.childNodes;
???????? for (var i=0;i<nodelist.length;i++)
???????? {
??????????? if (nodelist[i].nodeType=="1")
??????????? {
??????????????? if (nodelist[i].childNodes[1].innerHTML == thisrow.childNodes[1].innerHTML)
??????????????? par.removeChild(nodelist[i]);
??????????? }
???????? }
???? }
??

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

慕萊塢9076050
2019-03-18

?請(qǐng)問?
? newa.setAttribute("href","javascript:void(0));");
? newa.setAttribute("onclick","deleterow(this)");
這兩句代碼是什么意思

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

weibo_慕尼黑5117408

同問啊啊啊

2019-03-18 回復(fù) 有任何疑惑可以回復(fù)我~

#2

xiao二

添加屬性哈

2019-03-19 回復(fù) 有任何疑惑可以回復(fù)我~

#3

xiao二回復(fù) weibo_慕尼黑5117408

添加屬性哈

2019-03-19 回復(fù) 有任何疑惑可以回復(fù)我~

慕絲4883087 提問者
2019-02-15

<!DOCTYPE html>
<html>
?<head>
? <title> new document </title> ?
? <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>? ?
? <script type="text/javascript">
?
????? window.onload = function (){
???????????????? ?
???? // 鼠標(biāo)移動(dòng)改變背景,可以通過給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來改變所在行背景色。
????? var tr=document.getElementsByTagName("tr");
????? for (var i=0;i<tr.length;i++){
????????? tr[i].setAttribute("onmouseover","javascript:this.style.backgroundColor='#f2f2f2'");
????????? tr[i].setAttribute("onmouseout","javascript:this.style.backgroundColor='#fff'")
????? }
?? ? }
??? ?
????? // 編寫一個(gè)函數(shù)，供添加按鈕調(diào)用，動(dòng)態(tài)在表格的最后一行添加子節(jié)點(diǎn)；
???? function addrow(){
???????? var table=document.getElementById("table");
???????? var newtr=document.createElement("tr");
???????? var newid=document.createElement("td");
???????? var newname=document.createElement("td");
???????? var newope=document.createElement("td");
???????? var newa=document.createElement("a");
???????? newid.innerHTML=prompt("input id","");
???????? newname.innerHTML=prompt("input name","")
???????? newa.setAttribute("href","javascript:void(0));");
???????? newa.setAttribute("onclick","deleterow(this)");
???????? newa.innerHTML="刪除";
???????? newope.appendChild(newa);
???????? newtr.appendChild(newid);
???????? newtr.appendChild(newname);
???????? newtr.appendChild(newope);
???????? table.appendChild(newtr);
???????? window.onload();
???? }
???? // 創(chuàng)建刪除函數(shù)
???? function deleterow(delnode){
???????? var thisrow=delnode.parentNode.parentNode;
???????? var par=thisrow.parentNode;
???????? var nodelist=par.childNodes;
???????? for (var i=0;i<nodelist.length;i++)
???????? {
??????????? if (nodelist[i].nodeType=="1")
??????????? {
??????????????? if (nodelist[i].childNodes[1].innerHTML == thisrow.childNodes[1].innerHTML)
??????????????? par.removeChild(nodelist[i]);
??????????? }
???????? }
???? }
?

? </script>
?</head>
?<body>
?? ??? <table border="1" width="50%" id="table">
?? ??? <tr>
?? ??? ?<th>學(xué)號(hào)</th>
?? ??? ?<th>姓名</th>
?? ??? ?<th>操作</th>
?? ??? </tr> ?

?? ??? <tr>
?? ??? ?<td>xh001</td>
?? ??? ?<td>王小明</td>
?? ??? ?<td><a href="javascript:void(0));" onclick="deleterow(this)">刪除</a></td>?? 
?? ??? </tr>

?? ??? <tr>
?? ??? ?<td>xh002</td>
?? ??? ?<td>劉小芳</td>
?? ??? ?<td><a href="javascript:void(0));" onclick="deleterow(this)">刪除</a></td>?? 
?? ??? </tr> ?

?? ??? </table>
?? ??? <input type="button" value="添加一行" onclick="addrow()" />?? 
?</body>
</html>