<!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(){
????????????var?a?=?document.getElementsByTagName("tr");
????????????????for(var?i=0;i<a.length;i++){
????????????????????a[i].onmouseover?=?function?()?{
????????????????????????this.style.backgroundColor?=?"#ccc";
????????????????????}
????????????????????a[i].onmouseout?=?function?()?{
????????????????????????this.style.backgroundColor?=?"#fff";
????????????????????}
????????????????}
????????}//?鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。
????????//?編寫一個函數，供添加按鈕調用，動態在表格的最后一行添加子節點；
????????function?dele(obj)?{
????????????var?a?=document.getElementById("table");
????????????var?b?=?obj.parentNode.parentNode;
????????????a.removeChild(b);
????????}
????????//?創建刪除函數
????</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="dele(this)">刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
????</tr>
????<tr>
????????<td>xh002</td>
????????<td>劉小芳</td>
????????<td><a?href="javascript:;"?onclick="dele(this)">刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
????</tr>
</table>
<input?type="button"?value="添加一行"??/>???<!--在添加按鈕上添加點擊事件??-->
</body>
</html>
2017-06-19
<!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(){ Highlight(); ?}?? ?function?addOne(obj){? ????var?tbody?=?document.getElementById('table').lastChild;?? 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(this)'>刪除</a>"; ?tr.appendChild(td);??? ? ?tbody.appendChild(tr);??? Highlight(); ??? ?} ?function?deleteRow(obj){ ????var?tbody?=?document.getElementById('table').lastChild;?? var?tr?=?obj.parentNode.parentNode; ?tbody.removeChild(tr); ?} ?function?Highlight(){ var?tbody?=?document.getElementById('table').lastChild; trs?=?tbody.getElementsByTagName('tr');??? for(var?i?=1;i<trs.length;i++){ trs[i].onmouseover?=?function(){ this.style.backgroundColor?="#f2f2f2"; }? trs[i].onmouseout?=?function(){ this.style.backgroundColor?="#fff"; }? }?? ?} ??</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(this)">刪除</a></td> ???</tr> ???<tr> <td>xh002</td> <td>劉小芳</td> <td><a?href="javascript:;"?onclick="deleteRow(this)">刪除</a></td> ???</tr>?? ???</table> ???<input?type="button"?value="添加一行"?onclick="addOne()"?/> ?</body> </html>