效果：
代碼：
閱讀更多：
<頭runat =“伺服器”>
<標題></標題>
<樣式類型=“文字/css”>
tr 8. tr。
{
高度：30px；
}
</風格>
<腳本類型=“文字/javascript”>
window.onload = 函數() {
var oName = document.getElementById('txt1');
var oEasyName = document.getElementById('txt2');
var oHero = document.getElementById('txt3');
var oBtn = document.getElementById('btn');
var oTab = document.getElementById('tab1');
var num = oTab.tBodies[0].rows.length + 1;
oBtn.onclick = 函數 () {
var oTr = document.createElement('tr');
var oTd = document.createElement('td')
oTd.innerHTML = num++;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = oName.value;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = oEasyName.value;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = oHero.value;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = '<a href="#">刪除</a>';
oTr.appendChild(oTd);
oTd.getElementsByTagName('a')[0].onclick = function () {
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
}
oTab.tBodies[0].appendChild(oTr);
}
};
</腳本>
</頭>
<正文>
<div style="margin-left: 300px; margin-top: 30px;">
種族名稱：<input type="text" id="txt1" />
種族簡稱：<input type="text" id="txt2" />
英雄 :<input type="text" id="txt3" />
<input type="button" id="btn" value="新增資訊" />
</div>
<table id="tab1" style="text-align: center; width: 800px; margin-left: 300px;
頂部邊距：10px;">
<標題>
<tr style="background-color: #FF0000">
<td>
序號
</td>
<td>
種族名稱
</td>
<td>
種族名稱
</td>
<td>
圖片
</td>
<td>
操作
</td>
</tr>
</標題>
<正文>
<tr>
<td>
1
</td>
<td>
人類聯盟
</td>
<td>
哼
</td>
<td>
媒體：AM
</td>
<td>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
獸人部落
</td>
<td>
獸人
</td>
<td>
時間：BM
</td>
<td>
</td>
</tr>
<tr>
<td>
3
</td>
<td>
不死亡靈
</td>
<td>
UD
</td>
<td>
特色英雄:DK
</td>
<td>
</td>
</tr>
<tr>
<td>
4
</td>
<td>
暗夜精靈
</td>
<td>
東北
</td>
<td>
檢舉廣告：DH
</td>
<td>
</td>
</tr>
</tbody>
</表>
</正文>