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

誰(shuí)幫我看看代碼，郁悶很久了

<!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)改變背景,可以通過(guò)給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來(lái)改變所在行背景色。
???????? 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";
???????? }
???? }
????? // 編寫一個(gè)函數(shù)，供添加按鈕調(diào)用，動(dòng)態(tài)在表格的最后一行添加子節(jié)點(diǎn)；
??? 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);
??? }
?? ??? ??? ?
? ??? ?
???? // 創(chuàng)建刪除函數(shù)
???? function del(obj){
???????? var row=boj.parentNode.parentNode;
???????? row.parentNode.removeChild(row);
???? }
? </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:;" 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>

吃鳥(niǎo)的菜

2015-12-09

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

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

634

操作

收起

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

????????????//?鼠標(biāo)移動(dòng)改變背景,可以通過(guò)給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來(lái)改變所在行背景色。
????????????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";
????????????}
????????}
????????//?編寫一個(gè)函數(shù)，供添加按鈕調(diào)用，動(dòng)態(tài)在表格的最后一行添加子節(jié)點(diǎn)；
????????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);
????????}


????????//?創(chuàng)建刪除函數(shù)
????????function?del(obj){
????????????var?row=obj.parentNode.parentNode;
????????????row.parentNode.removeChild(row);
????????}
????</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:;"?onClick="del(this)">刪除</a></td>???<!--在刪除按鈕上添加點(diǎn)擊事件??-->
????</tr>
????<tr>
????????<td>xh002</td>
????????<td>劉小芳</td>
????????<td><a?href="javascript:;"?onClick="del(this)">刪除</a></td>???<!--在刪除按鈕上添加點(diǎn)擊事件??-->
????</tr>
</table>
<input?type="button"?value="添加一行"?onClick="addRow()"?/>???<!--在添加按鈕上添加點(diǎn)擊事件??-->
</body>
</html>