                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript進階篇

我試圖通過給tr節點設置id值進行控制插入與刪除，下面的代碼好像都行不通，無論是改變底色還是增刪功能？（糾結了很久，也看過一些大佬們的代碼，思路不一樣，但我覺得我的這個想法還是有可行性的，但自己又找不出哪里的問題，只能厚著臉皮來這求教了）

<!DOCTYPE?html>
<html>
?<head>
??<title>?new?document?</title>??
??<meta?http-equiv="Content-Type"?content="text/html;?charset=gbk"/>???
??<script?type="text/javascript">?
????????function?colorA(obj)
????????{
????????????obj.style.backgroundColor="#f2f2f2";
????????}
?????????function?colorB(obj)
????????{
????????????obj.style.backgroundColor="#fff";
????????}
??????window.onload?=?function(){
??????????????????
?????//?鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。onmouseover
?????????var?tr=document.getElementsByTagName("tr");??//返回tr節點列表
?????????for(var?i=0;i!=tr.length;i++)
?????????{
?????????????tr[i].setAttribute("onmouseover","colorA(tr[i])");
?????????????tr[i].setAttribute("onmouseout","colorB(tr[i])");
?????????}
????????
?????
?????}
?????
??????//?編寫一個函數，供添加按鈕調用，動態在表格的最后一行添加子節點；
??????//?通過給tr節點設置id值進行控制插入與刪除
????function?add()
????{
????????var?newnode?=?document.createElement("tr");??????//添加的tr節點
????????var?node?=?document.getElemnentById("table");????//在id=table的子列表中添加該新節點node
????????var?len?=?node.childNodes.length;????????????????//返回該節點子列表現在的長度，方便為下一個添加的節點做標記
????????newnode.setAttribute("id","len");??????????????//新添tr節點的id值為len
????????var?newna?=?document.createElement("td");????//創建tr節點的第一個子節點newna
????????if(len<10)???????????????????????????????????//學號的格式
????????var?newnatext?=?document.createTextNode("xh00"+len);
????????else?if(len<100)
????????var?newnatext?=?document.createTextNode("xh0"+len);
????????newna.appendChild(newnatext);???????????????????????//學號項
????????newnode.appendChild(newna);
????????var?newnb?=?document.createElement("td");???????????//姓名項
????????var?newnc?=?document.createElement("td");???????????//操作項
????????newnc.innerHTML='<a?href="javascript:;"?onclick="dele('+len+')>刪除</a>';//以文本格式插入內容
????????newnode.appendChild(newnb);??????????//在tr節點插入姓名項td節點
????????newnode.appendChild(newnc);??????????//在tr節點插入操作項td節點
????????node.appendChild(newnode);???????????//在node中插入newnode(新的一行)
????????
????}
????
?????//?創建刪除函數
????function?dele(n)
?????{
?????????var?otest=document.getElementById("table");
?????????ostest.removeChild(ostest.childNodes[n]);
?????}
??</script>?
?</head>?
?<body>?
???????<table?border="1"?width="50%"?id="table">
???????<tr?id="0">
????????<th>學號</th>
????????<th>姓名</th>
????????<th>操作</th>
???????</tr>??
???????<tr?id="1">
????????<td>xh001</td>
????????<td>王小明</td>
????????<td><a?href="javascript:;"?onclick="dele(1)">刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
???????</tr>
???????<tr?id="2">
????????<td>xh002</td>
????????<td>劉小芳</td>
????????<td><a?href="javascript:;"?onclick="dele(2)">刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
???????</tr>??
???????</table>
???????<input?type="button"?value="添加一行"??onclick="add()"/>???<!--在添加按鈕上添加點擊事件??-->
?</body>
</html>

流浪的白小菜

2019-11-10

源自：JavaScript進階篇 9-22

關注問題我要回答

909

操作

收起

3 回答

qq_十三_5 回答被采納 +2 積分
2019-11-22

將colorA(tr[i]) 改成this，colorB同樣。

document.getElementById編寫錯誤。

添加刪除a標簽時綁定事件拼寫錯誤，沒有結束"。

你這犯的錯誤。。。

修改完的給你貼上來

<!DOCTYPE?html>

<html>

?<head>

??<title>?new?document?</title>??

??<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"/>???

??<script?type="text/javascript">?

????????function?colorA(obj)

????????{

????????????obj.style.backgroundColor="#f2f2f2";

????????}

?????????function?colorB(obj)

????????{

????????????obj.style.backgroundColor="#fff";

????????}

??????window.onload?=?function(){

???????????????????

?????//?鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。onmouseover

?????????var?tr=document.getElementsByTagName("tr");??//返回tr節點列表

?????????for(var?i=0;i<tr.length;i++)

?????????{

?????????????tr[i].setAttribute("onmouseover","colorA(this)");

?????????????tr[i].setAttribute("onmouseout","colorB(this)");

?????????}

?????????

??????

?????}

??????

??????//?編寫一個函數，供添加按鈕調用，動態在表格的最后一行添加子節點；

??????//?通過給tr節點設置id值進行控制插入與刪除

????function?add()

????{

????????var?newnode?=?document.createElement("tr");??????//添加的tr節點

????????var?node?=?document.getElementById("table");????//在id=table的子列表中添加該新節點node

????????var?len?=?node.childNodes.length;????????????????//返回該節點子列表現在的長度，方便為下一個添加的節點做標記

????????newnode.setAttribute("id","len");??????????????//新添tr節點的id值為len

????????var?newna?=?document.createElement("td");????//創建tr節點的第一個子節點newna

????????if(len<10)???????????????????????????????????//學號的格式

????????var?newnatext?=?document.createTextNode("xh00"+len);

????????else?if(len<100)

????????var?newnatext?=?document.createTextNode("xh0"+len);

????????newna.appendChild(newnatext);???????????????????????//學號項

????????newnode.appendChild(newna);

????????var?newnb?=?document.createElement("td");???????????//姓名項

????????var?newnc?=?document.createElement("td");???????????//操作項

????????newnc.innerHTML='<a?href="javascript:;"?onclick="dele('+len+')">刪除</a>';//以文本格式插入內容

????????newnode.appendChild(newnb);??????????//在tr節點插入姓名項td節點

????????newnode.appendChild(newnc);??????????//在tr節點插入操作項td節點

????????node.appendChild(newnode);???????????//在node中插入newnode(新的一行)

?????????

????}

?????

?????//?創建刪除函數

????function?dele(n)

?????{

?????????var?otest=document.getElementById("table");

?????????console.log(otest.childNodes[n]);

?????????otest.removeChild(otest.childNodes[n]);

?????}

??</script>?

?</head>?

?<body>?

???????<table?border="1"?width="50%"?id="table">

???????<tr?id="0">

????????<th>學號</th>

????????<th>姓名</th>

????????<th>操作</th>

???????</tr>??

???????<tr?id="1">

????????<td>xh001</td>

????????<td>王小明</td>

????????<td><a?href="javascript:;"?onclick="dele(1)">刪除</a></td>???

???????</tr>

???????<tr?id="2">

????????<td>xh002</td>

????????<td>劉小芳</td>

????????<td><a?href="javascript:;"?onclick="dele(2)">刪除</a></td>???

???????</tr>??

???????</table>

???????<input?type="button"?value="添加一行"??onclick="add()"/>???

?</body>

</html>

0 回復有任何疑惑可以回復我~

收起回答

慕九州5249392
2019-12-25

不用這么麻煩，直接用委托事件，另外，學了jQuery你會發現這個練習簡單的不行

0 回復有任何疑惑可以回復我~

收起回答

慕俠3407622
2019-11-19

你這是哪個功能有問題？

0 回復有任何疑惑可以回復我~

收起回答

舉報

0/150

提交

取消

JavaScript進階篇

參與學習 468835 人
解答問題 22582 個

本課程從如何插入JS代碼開始，帶您進入網頁動態交互世界

進入課程

本課相似問答

3 回答為什么不能通過ID獲得table 從而刪除里面的tr結點？

2 回答這些代碼是我抄的答案，可還是運行不出來，能不能告訴我哪里出錯了！！

1 回答大佬們幫我看看我的代碼到底問題在哪，一模一樣還是運行出來沒有效果

2 回答大佬們，我的代碼還能在精簡一些嗎？我感覺我的代碼很冗余。。。。。

2 回答刪除函數里面的obj是什么意思？我的代碼怎么不能刪除行呢？

搜索更多本課相關問答

我試圖通過給tr節點設置id值進行控制插入與刪除，下面的代碼好像都行不通，無論是改變底色還是增刪功能？（糾結了很久，也看過一些大佬們的代碼，思路不一樣，但我覺得我的這個想法還是有可行性的，但自己又找不出哪里的問題，只能厚著臉皮來這求教了）

我要回答關注問題

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

3 回答

本課相似問答