<!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(){
??????????????????
?????//?！！?功能不能實(shí)現(xiàn)???鼠標(biāo)移動(dòng)改變背景,可以通過(guò)給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來(lái)改變所在行背景色。
????????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";
????????????}
????????}
????????
?
?}
?????
??????//?編寫(xiě)一個(gè)函數(shù)，供添加按鈕調(diào)用，動(dòng)態(tài)在表格的最后一行添加子節(jié)點(diǎn)；
????function?add(){
????????var?content?=?prompt("請(qǐng)輸入您的學(xué)號(hào)和姓名，中間以逗號(hào)隔開(kāi)","");
????????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);
????}
????
??? ?
?????//??。」δ懿荒軐?shí)現(xiàn)????????????創(chuàng)建刪除函數(shù)
????????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>學(xué)號(hào)</th>
<th>姓名</th>
<th>操作</th>
???</tr>??
???<tr>
<td>xh001</td>
<td>王小明</td>
<td><a?href="javascript:del();"?>刪除</a></td>???<!--在刪除按鈕上添加點(diǎn)擊事件??-->
???</tr>
???<tr>
<td>xh002</td>
<td>劉小芳</td>
<td><a?href="javascript:del();"?>刪除</a></td>???<!--在刪除按鈕上添加點(diǎn)擊事件??-->
???</tr>??
???</table>
???<input?type="button"?value="添加一行"?onclick="add()"?/>???<!--在添加按鈕上添加點(diǎn)擊事件??-->
?</body>
</html>
有兩個(gè)問(wèn)題：1,背景顏色沒(méi)有改變；2，不能刪除行
yuqingzhijie3596863
2016-09-11 09:15:21
