                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript進階篇

終于是寫完了...

<!DOCTYPE?html>
<html>
?<head>
??<title>?new?document?</title>??
??<meta?http-equiv="Content-Type"?content="text/html;?charset=gbk"/>
??<style?type="text/css">
??????tr:hover{
??????????background-color:#eee;
??????}
??</style>
??<script?type="text/javascript">?
??
??????window.onload?=?function(){
????????//刪除操作
????????deleteRow();
??????}
?????
//編寫添加函數
function?addRow(){
????????????var?table?=?document.getElementsByTagName("tbody")[0];?
????var?num?=?document.getElementsByName("number")[0];
????var?name?=?document.getElementsByName("name")[0];
????//console.log(name.value);
????if(num.value?&&?name.value){
????????var?newTr?=?document.createElement("tr");
????????newTr.innerHTML?=?"<td>"+num.value+"</td><td>"+name.value+"</td><td><a?href='javascript:;'?>刪除</a></td>";
???????//?console.log(newTr);
????????table.appendChild(newTr);
????????deleteRow();
????}else{
????????alert("請輸入完整信息！");
????}
}
//編寫刪除函數
????????function?deleteRow(){
????????????var?tr?=?document.getElementsByTagName("tr"),
????????????????a?=?document.getElementsByTagName("a");
????????????
????????????for(var?i=0;i<a.length;i++){
????????????????a[i].index?=?i;
????????????????a[i].onclick=function(){
????????????????????//console.log(this.index);
????????????????????tr[0].parentNode.removeChild(tr[this.index+1]);
????????????????????//console.log(this.index);
????????????????????deleteRow();
????????????????}
????????????}
????????}?
?????
??</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:;"?>刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
???</tr>
???<tr>
<td>xh002</td>
<td>劉小芳</td>
<td><a?href="javascript:;"?>刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
???</tr>
???<tr>
<td>xh003</td>
<td>張小三</td>
<td><a?href="javascript:;"?>刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
???</tr>????
???</table>
???????<br/>
???<label>學號</label>
???<input?type="text"?name="number"/><br/>
???<label>姓名</label>
???<input?type="text"?name="name"/><br/>
???<input?type="button"?value="添加一行"?onclick="addRow();"?/>???<!--在添加按鈕上添加點擊事件??-->
?</body>
</html>