点滴积累【JS】---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>
点滴积累【JS】---JS小功能(操作Table--动态添加删除表格及数据)的更多相关文章
- 用js 向h5 中的table 动态添加数据 (简单实现)
//向 表格传值 function setTextareaValue(items,pp){ console.log(" 进入函数 items=="+items); var tb = ...
- table动态添加删除一行和改变标题
<style type="text/css"> body{ font-size:13px; line-height:25px; } table{ border-top: ...
- BootStrap table动态增删改表格内数据
1:添加一个[操作]列 { title: "操作", align: 'center', valign: 'middle', width: 160, // 定义列的宽度,单位为像 ...
- JS动态添加删除html
本功能要求是页面传一个List 集合给后台而且页面可以动态添加删除html代码需求如下: 下面是jsp页面代码 <%@ page language="java" pageEn ...
- ASP.NET给Table动态添加删除行,并且得到控件的值
ASP.NET给Table动态添加控件并且得到控件的值 由于跟老师做一个小的项目,可是我自己又不太懂js,所以一直为动态建立表格并且能动态的取值和赋值感到苦恼.起初在网上找到了一些js资源,解决了动态 ...
- JS类小功能
工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...
- table 排序 添加 删除 等操作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 数据字典的设计--3.首页添加删除表格(JS实现)
页面效果: JS代码: 1.添加表格 function insertRows(){ //获取表格对象 var tb1 = $("#dictTbl"); var tempRow = ...
- js遍历对象的属性并且动态添加属性
var person= { name: 'zhangsan', pass: '123' , 'sni.ni' : 'sss', hello:function (){ for(var i=0;i< ...
随机推荐
- app生成工具
国内主流的在线APP生成工具 应用公园:http://www.apppark.cn/ 追信魔盒:http://app.zhui.cn/ 安米网:http://www.appbyme.com/ 简网AP ...
- 封装log4cp p
log4cpp 是参考 log4j 所写的 c++ 版本的写 log 的库.可以在这里下载 http://log4cpp.sourceforge.net/ 我的使用方法是: 1,定义了一个 _ ...
- 关于DeploymentConfig的思考
为什么是deploymentconfig而不是Kubernetes的deployment 在new-app的时候openshift直接创建了一个deploymentconfig并部署成rc,开始并不理 ...
- 《Go语言实战》笔记之第三章 ----包
原文地址: http://www.niu12.com/article/10 ####包 所有的.go 文件,除了空行和注释,都应该在第一行声明自己所属的包. 每个包都在一个单独的目录里. 不能把多个包 ...
- iOS:对GCD中 同步、异步、并行、串行的见解
1.GCD-同步执行多线程时 GCD中不管向什么类型的队列加同步任务,实际上都会加到当前线程中(一般为主线程). 2.GCD-异步执行多线程时 GCD中不管向什么类 ...
- 在移动网页网页上点击链接跳转到QQ聊天界面
打开qq聊天窗口的方法 <a href="http://wpa.qq.com/msgrd?v=3&uin=1450612626&site=qq&menu=yes ...
- 【百度地图JavaScript API】手机端浏览器定位的实现
[百度地图JavaScript API]手机端浏览器定位的实现 https://blog.csdn.net/xiao190128/article/details/72579476
- python版本管理--pyenv
python版本环境管理 下载依赖 yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readli ...
- 算法笔记_085:蓝桥杯练习 9-3摩尔斯电码(Java)
目录 1 问题描述 2 解决方案 1 问题描述 问题描述 摩尔斯电码破译.类似于乔林教材第213页的例6.5,要求输入摩尔斯码,返回英文.请不要使用"zylib.h",只能使用 ...
- 算法笔记_083:蓝桥杯练习 合并石子(Java)
目录 1 问题描述 2 解决方案 1 问题描述 问题描述 在一条直线上有n堆石子,每堆有一定的数量,每次可以将两堆相邻的石子合并,合并后放在两堆的中间位置,合并的费用为两堆石子的总数.求把所有石子 ...