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

誰幫我看看代碼，郁悶很久了

<!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(){
???????????????? ?
???? // 鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。
???????? var rowList=document.getElementsByTagName("tr");
?? ??? ?for(var i=0;i<rowList.length;i++){
?? ??? ? changeColor(rowList[i]);? ?
?? ??? ?}
??? ?
?? ?
?? ? }
???? function changeColor(obj){
???????? obj.onmouseover=function(){
???????????? obj.style.backgrounColor="#f2f2f2";
???????? }
???????? obj.onmouseout=function(){
???????????? obj.style.backgroundColor="#fff";
???????? }
???? }
????? // 編寫一個函數，供添加按鈕調用，動態在表格的最后一行添加子節點；
??? function addRow(){
??????? var newRow=document.createElement("tr");
??????? var td1=document.createElement("td");
??????? var td2=document.createElement("td");
??????? var td3=document.createElement("td");
??????? td3.setAttribute("onClick","del(this)");
??????? td3.innerHTML="刪除";
??????? td3.appendChild(text);
??????? newRow.appendChild(td1);
??????? newRow.appendChild(td2);
??????? newRow.appendChild(td3);
??????? var table=document.getElementByTagName("table");
??????? table.appendChild(newRow);
??????? changeColor(newRow);
??? }
?? ??? ??? ?
? ??? ?
???? // 創建刪除函數
???? function del(obj){
???????? var row=boj.parentNode.parentNode;
???????? row.parentNode.removeChild(row);
???? }
? </script>
?</head>
?<body>
?? ??? <table border="1" width="50%" id="table">
?? ??? <tr>
?? ??? ?<th>學號</th>
?? ??? ?<th>姓名</th>
?? ??? ?<th>操作</th>
?? ??? </tr> ?
?? ??? <tr>
?? ??? ?<td>xh001</td>
?? ??? ?<td>王小明</td>
?? ??? ?<td><a href="javascript:;" onClick="del(this)">刪除</a></td>?? 
?? ??? </tr>
?? ??? <tr>
?? ??? ?<td>xh002</td>
?? ??? ?<td>劉小芳</td>
?? ??? ?<td><a href="javascript:;" onClick="del(this)">刪除</a></td>?? 
?? ??? </tr> ?
?? ??? </table>
?? ??? <input type="button" value="添加一行" onClick="addRow()" />?? 
?</body>
</html>

吃鳥的菜

2015-12-09

源自：JavaScript進階篇 9-22

關注問題我要回答

639

操作

收起

1 回答

李曉健
2015-12-09

<!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(){

????????????//?鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。
????????????var?rowList=document.getElementsByTagName("tr");
????????????for(var?i=0;i<rowList.length;i++){
????????????????changeColor(rowList[i]);
????????????}


????????}
????????function?changeColor(obj){
????????????obj.onmouseover=function(){
????????????????obj.style.backgrounColor="#f2f2f2";
????????????}
????????????obj.onmouseout=function(){
????????????????obj.style.backgroundColor="#fff";
????????????}
????????}
????????//?編寫一個函數，供添加按鈕調用，動態在表格的最后一行添加子節點；
????????function?addRow(){
????????????var?newRow=document.createElement("tr");
????????????var?td1=document.createElement("td");
????????????var?td2=document.createElement("td");
????????????var?td3=document.createElement("td");
????????????var?a?=?document.createElement('a');
????????????a.setAttribute("onClick","del(this)");
????????????a.innerHTML="刪除";
????????????td3.appendChild(a);
????????????newRow.appendChild(td1);
????????????newRow.appendChild(td2);
????????????newRow.appendChild(td3);
????????????var?table=document.getElementsByTagName("table")[0];
????????????table.appendChild(newRow);
????????????changeColor(newRow);
????????}


????????//?創建刪除函數
????????function?del(obj){
????????????var?row=obj.parentNode.parentNode;
????????????row.parentNode.removeChild(row);
????????}
????</script>
</head>
<body>
<table?border="1"?width="50%"?id="table">
????<tr>
????????<th>學號</th>
????????<th>姓名</th>
????????<th>操作</th>
????</tr>
????<tr>
????????<td>xh001</td>
????????<td>王小明</td>
????????<td><a?href="javascript:;"?onClick="del(this)">刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
????</tr>
????<tr>
????????<td>xh002</td>
????????<td>劉小芳</td>
????????<td><a?href="javascript:;"?onClick="del(this)">刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
????</tr>
</table>
<input?type="button"?value="添加一行"?onClick="addRow()"?/>???<!--在添加按鈕上添加點擊事件??-->
</body>
</html>