<!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()
}
//?鼠標(biāo)移動(dòng)改變背景,可以通過(guò)給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來(lái)改變所在行背景色。
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"}
}
}
//?編寫一個(gè)函數(shù)，供添加按鈕調(diào)用，動(dòng)態(tài)在表格的最后一行添加子節(jié)點(diǎn)；
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();
}
//?創(chuàng)建刪除函數(shù)
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>學(xué)號(hào)</th>
<th>姓名</th>
<th>操作</th>
</tr>??
<tr>
<td>xh001</td>
<td>王小明</td>
<td><a?href="javascript:;"?onclick="deleteRow()">刪除</a></td>???<!--在刪除按鈕上添加點(diǎn)擊事件??-->
</tr>
<tr>
<td>xh002</td>
<td>劉小芳</td>
<td><a?href="javascript:;"?onclick="deleteRow()">刪除</a></td>???<!--在刪除按鈕上添加點(diǎn)擊事件??-->
</tr>??
</table>
<input?type="button"?value="添加一行"??onclick="addOne()"/>???<!--在添加按鈕上添加點(diǎn)擊事件??-->
</body>
</html>
2022-12-15
生成新的一行后，再點(diǎn)刪除，需要點(diǎn)兩遍才能刪除這一行，暫未發(fā)現(xiàn)原因
2022-06-07
同時(shí)要注意了,我這種方法的優(yōu)點(diǎn)是看上去比較清晰,就像寫html一樣, 但是從性能方面出發(fā)? 我這種寫法會(huì)造成一點(diǎn)性能問(wèn)題,從理論上面講 比你的那種性能慢..? 但是從我們?nèi)说娜庋劭瓷先?不管是你的寫法還是我的 都是秒加載..? 所以這個(gè)東西就是仁者見(jiàn)仁智者見(jiàn)智了..? 你如果想好一點(diǎn)的閱讀性? 你就用我的? ?如果你在乎理論上面那點(diǎn)點(diǎn)點(diǎn)點(diǎn)的性能? 你還是保持你自己的..? 寫代碼這東西比較靈活? 沒(méi)有一定的絕對(duì)答案
2022-06-07
問(wèn)題沒(méi)什么問(wèn)題,只是這樣寫顯得代碼臃腫? 不容易一目了然的閱讀..? 我這里有一種方法也能實(shí)現(xiàn)