JS小功能(操作Table--動態(tài)添加刪除表格及數(shù)據(jù))實現(xiàn)代碼
效果：
代碼：
<head runat="server">
<title></title>
<style type="text/css">
tr
{
height: 30px;
}
</style>
<script type="text/javascript">
window.onload = function () {
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 = function () {
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);
}
};
</script>
</head>
<body>
<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" border="1" style="text-align: center; width: 800px; margin-left: 300px;
margin-top: 10px;">
<thead>
<tr style="background-color: #FF0000">
<td>
序號
</td>
<td>
種族名稱
</td>
<td>
種族簡稱
</td>
<td>
英雄
</td>
<td>
操作
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
人類聯(lián)盟
</td>
<td>
HUM
</td>
<td>
代表性英雄：AM
</td>
<td>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
獸人部落
</td>
<td>
ORC
</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>
NE
</td>
<td>
代表性英雄：DH
</td>
<td>
</td>
</tr>
</tbody>
</table>
</body>
相關(guān)文章
本文通過實例代碼給大家介紹了js同時按下兩個方向鍵的實現(xiàn)方法，感興趣的朋友跟隨腳本之家小編一起看看吧2007-12-12
JavaScript中使用document.write向頁面輸出內(nèi)容實例
這篇文章主要介紹了JavaScript中使用document.write向頁面輸出內(nèi)容實例,本文講解了輸出普通文字、帶HTML標(biāo)簽內(nèi)容的方法,需要的朋友可以參考下2014-10-10
這篇文章主要介紹了js實現(xiàn)敏感詞過濾算法及實現(xiàn)邏輯，文中介紹了dfa算法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07
javascript forEach函數(shù)實現(xiàn)代碼
在Base2中找到一個叫forEach的函數(shù)，是我見過的最好的實現(xiàn)。挖出來分析一下。它能對各種普通對象，字符串，數(shù)組以及類數(shù)組進(jìn)行遍歷。如果原游覽器的對象已實現(xiàn)此函數(shù)，它則調(diào)用原對象的函數(shù)。2010-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序之電影影評小程序制作代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
JavaScript HTML DOM 元素 (節(jié)點)新增，編輯，刪除操作實例分析
這篇文章主要介紹了JavaScript HTML DOM 元素 (節(jié)點)新增，編輯，刪除操作,結(jié)合實例形式分析了JavaScript針對HTML DOM 元素 (節(jié)點)的新增，編輯，刪除相關(guān)操作技巧與使用注意事項,需要的朋友可以參考下2020-03-03
早期webpack的目的是允許在瀏覽器中運(yùn)行大多數(shù)node.js模塊,但是模塊整體格局發(fā)生了變化,現(xiàn)在許多模塊的主要用途是以編寫前端為目的,下面這篇文章主要給大家介紹了關(guān)于巧用webpack在日志中記錄文件行號的相關(guān)資料,需要的朋友可以參考下2022-11-11
JS實現(xiàn)數(shù)組簡單去重及數(shù)組根據(jù)對象中的元素去重操作示例
這篇文章主要介紹了JS實現(xiàn)數(shù)組簡單去重及數(shù)組根據(jù)對象中的元素去重操作,涉及javascript數(shù)組元素的遍歷、判斷、追加等操作實現(xiàn)去重功能的相關(guān)技巧,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了Ajax請求時無法重定向的問題解決代碼詳解，當(dāng)使用Ajax請求時，如果后臺進(jìn)行重定向到其他頁面時是無法成功的，只能在瀏覽器地址欄輸入才能夠?qū)崿F(xiàn)重定向。下面我們來看看解決方法吧2019-06-06
設(shè)置和讀取cookie的javascript代碼...2007-07-07