<!DOCTYPE?html>
<html?lang="en">
<head>
<meta?charset="UTF-8">
<meta?http-equiv="X-UA-Compatible"?content="IE=edge">
<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
<title>Document</title>
<script?type="text/javascript">
window.onload?=?function?(){
Highlight()
}
//?鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。
function?Highlight(){
var?trs=document.getElementsByTagName("tr")
for(var?i=0;i<trs.length;i++){
trs[i].onmouseover=function(){this.style.backgroundColor="#f2f2f2"}
trs[i].onmouseout=function(){this.style.backgroundColor="#fff"}
}
}
//?編寫一個函數，供添加按鈕調用，動態在表格的最后一行添加子節點；
function?addOne(){
var?tbody=document.getElementById("table");
var?tr=document.createElement("tr");
var?td=document.createElement("td");
td.innerHTML="<input?type='text'/>"
tr.appendChild(td);
td=document.createElement("td");
td.innerHTML="<input?type='text'/>";
tr.appendChild(td);
td=document.createElement("td");
td.innerHTML="<a?href='javascript:;'?onclick='deleteRow()'>刪除</a>"
tr.appendChild(td)
tbody.appendChild(tr)
Highlight();
}
//?創建刪除函數
function?deleteRow(){
var?trs=document.getElementsByTagName("tr")
for(var?i=0;i<trs.length;i++){
trs[i].onclick=function(){this.parentNode.removeChild(this)}
}
}
</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="deleteRow()">刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
</tr>
<tr>
<td>xh002</td>
<td>劉小芳</td>
<td><a?href="javascript:;"?onclick="deleteRow()">刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
</tr>??
</table>
<input?type="button"?value="添加一行"??onclick="addOne()"/>???<!--在添加按鈕上添加點擊事件??-->
</body>
</html>
2022-12-15
生成新的一行后，再點刪除，需要點兩遍才能刪除這一行，暫未發現原因
2022-06-07
同時要注意了,我這種方法的優點是看上去比較清晰,就像寫html一樣, 但是從性能方面出發? 我這種寫法會造成一點性能問題,從理論上面講 比你的那種性能慢..? 但是從我們人的肉眼看上去,不管是你的寫法還是我的 都是秒加載..? 所以這個東西就是仁者見仁智者見智了..? 你如果想好一點的閱讀性? 你就用我的? ?如果你在乎理論上面那點點點點的性能? 你還是保持你自己的..? 寫代碼這東西比較靈活? 沒有一定的絕對答案
2022-06-07
問題沒什么問題,只是這樣寫顯得代碼臃腫? 不容易一目了然的閱讀..? 我這里有一種方法也能實現