JS小功能(操作Table--动态添加删除表格及数据)实现代码
作者:互联网
2025-08-29
效果:
代码:
复制代码代码如下:
tr
{
height: 30px;
}
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 = '删除';
oTr.appendChild(oTd);
oTd.getElementsByTagName('a')[0].onclick = function () {
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
}
oTab.tBodies[0].appendChild(oTr);
}
};
种族名称:
种族简称:
英雄 :
序号 | 种族名称 | 种族简称 | 英雄 | 操作 |
1 | 人类联盟 | HUM | 代表性英雄:AM | |
2 | 兽人部落 | ORC | 代表性英雄:BM | |
3 | 不死亡灵 | UD | 代表性英雄:DK | |
4 | 暗夜精灵 | NE | 代表性英雄:DH |
相关标签:
相关推荐
专题
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
最新数据
相关文章
最新版vue3+TypeScript开发入门到实战教程之路由详解二
src-components调用链与即时聊天组件树
从0开始设计一个树和扁平数组的双向同步方案
拒绝 rem 计算!Vue3 大屏适配,我用 vfit 一行代码搞定
Home双router-view与布局切换逻辑
uniapp uview-plus 自定义动态验证
Vue3 单元测试实战:从组合式函数到组件
VUE-组件命名与注册机制
VTJ.PRO 在线应用开发平台概览
v0.dev 支持 RSC 了!AI 生成全栈组件离我们还有多远?
AI精选
