當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS小功能(操作Table--动态添加删除表格及数据)实现代码

發布時間：2025/3/20 javascript 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS小功能(操作Table--动态添加删除表格及数据)实现代码小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

效果：
[在新窗口打開圖片]

代碼：
代碼如下:

<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>
? ? ? ? ? ? ? ? ? ?人類聯盟
? ? ? ? ? ? ? ?</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>

轉載于:https://blog.51cto.com/unity3d168/1333552

總結

以上是生活随笔為你收集整理的JS小功能(操作Table--动态添加删除表格及数据)实现代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。