<!DOCTYPE?html>
<html>
?<head>
??<title>?new?document?</title>??
??<meta?http-equiv="Content-Type"?content="text/html;?charset=gbk"/>
??<style?type="text/css">
??????.show{
????????background-color:#9F6;
????????color:#00C;
??????}
??</style>
??<script?type="text/javascript">?
??
??????window.onload?=?function(){
??????????????????
?????//?！！?功能不能實現???鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。
????????var?rowList?=?document.getElementsByTagName("tr");
????????for(var?i=1;i<rowList.length;i++){
????????????rowList[i].onmouseover?=?function(){
????????????????rowList[i].className?=?"show";
????????????}
????????????rowList[i].onmouseout?=?function(){
????????????????rowList[i].className?=?"hideShow";
????????????}
????????}
????????
?
?}
?????
??????//?編寫一個函數，供添加按鈕調用，動態在表格的最后一行添加子節點；
????function?add(){
????????var?content?=?prompt("請輸入您的學號和姓名，中間以逗號隔開","");
????????var?id?=?content.split(",")[0];
????????var?name?=?content.split(",")[1];
????????var?row?=?document.createElement("tr");
????????var?tdName?=?document.createElement("td");
????????var?tdId?=?document.createElement("td");
????????var?tdOpe?=?document.createElement("td");
????????var?link?=?document.createElement("a");
????????tdName.innerHTML?=?name;
????????tdId.innerHTML?=?id;
????????link.innerHTML?=?"刪除";
????????link.setAttribute("href","javascript:del();");
????????row.appendChild(tdId);
????????row.appendChild(tdName);
????????tdOpe.appendChild(link);
????????row.appendChild(tdOpe);
????????var?table?=?document.getElementById("table");
????????table.appendChild(row);
????}
????
??? ?
?????//???！功能不能實現????????????創建刪除函數
????????function?del(){
????????????var?thisRow?=?this.parentNode;
????????????var?table?=?document.getElementById("table");
????????????table.removeChild(thisRow);
????????}
??</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:del();"?>刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
???</tr>
???<tr>
<td>xh002</td>
<td>劉小芳</td>
<td><a?href="javascript:del();"?>刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
???</tr>??
???</table>
???<input?type="button"?value="添加一行"?onclick="add()"?/>???<!--在添加按鈕上添加點擊事件??-->
?</body>
</html>
有兩個問題：1,背景顏色沒有改變；2，不能刪除行
yuqingzhijie3596863
2016-09-11 09:15:21
