效果圖
題目：按create鍵將上面填寫的相應信息增加到表格中，按delete鍵將指定行刪除。
整體思路：
- 先用HTML將文檔寫好，創建三個input輸入框和一個create按鈕以及一個table表格。
- 添加信息。 然后用JS通過
document.getElementById()拿到相應的文本框的值，在create按鈕上添加一個onclick()事件來動態增加表格的行和列。首先var oTr=document.createElement('tr');創建一行，然后用var oTd=document.createElement('td')創建四列，把每個文本框的值通過oTd.innerHTML來加到列中，再通過oTr.appendChild(oTd)將相應列增加到一行中，最后通過tabEle.appendChild(oTr)將行增加到表格中。 - 刪除指定行。只需要在創建的按鈕后面寫一個
onclick()事件，通過oTr.remove(this);來刪除指定行，this代表本行。
特別注意的是：
創建按鈕時的寫法為：
var oTd=document.createElement('td');
var button=document.createElement('button');
button.onclick=function(){
oTr.remove(this);
}
var text=document.createTextNode('delete');
button.appendChild(text);
oTd.appendChild(button);
oTr.appendChild(oTd);
而不能像下面這樣寫：
var deleEle=document.createElement("input");
deleEle.type="button";
deleEle.value="delete";
oTd.appendChild(deleEle);
否則只有最后一行才能添加上按鈕，前面創建的按鈕會自動消失，注意語法規則。
整體代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var nameEle=document.getElementById("name");
var ageEle=document.getElementById("age");
var sexEle=document.getElementById("sex");
var buttEle=document.getElementById("cre");
var tabEle=document.getElementById("tab");
buttEle.onclick=function(){
var oTr=document.createElement('tr');//創建一個tr
//創建第一個td
var oTd=document.createElement('td')
oTd.innerHTML=nameEle.value;
oTr.appendChild(oTd);//將td插入tr
//創建第二個td
var oTd=document.createElement('td');
oTd.innerHTML=ageEle.value;
oTr.appendChild(oTd);//將td插入tr
//創建第三個td
var oTd=document.createElement('td');
oTd.innerHTML=sexEle.value;
oTr.appendChild(oTd);//將td插入tr
//創建第四個td
var oTd=document.createElement('td');
var button=document.createElement('button');
button.onclick=function(){
oTr.remove(this);
}
var text=document.createTextNode('delete');
button.appendChild(text);
oTd.appendChild(button);
oTr.appendChild(oTd);
tabEle.appendChild(oTr);//將整個tr插入到表格中
}
}
</script>
</head>
<body>
<form method="post">
Name:<input type="text" id="name"/><br>
Age:<input type="text" id="age"><br>
Sex:<input type="text" id="sex"><br>
<input type="button" value="create" id="cre"><br>
<!--<input type="button" value="delete" id="dele">-->
<table border="1" cellspacing="0" id="tab" width="300px">
<tr><td>Name</td><td>Age</td><td>Sex</td><td>delete</td></tr>
</table>
</form>
</body>
</html>
