效果：

代码：

 <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" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

         <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--动态添加删除表格及数据）的更多相关文章

  1. 用js 向h5 中的table 动态添加数据 （简单实现）

    //向 表格传值 function setTextareaValue(items,pp){ console.log(" 进入函数 items=="+items); var tb = ...

  2. table动态添加删除一行和改变标题

    <style type="text/css"> body{ font-size:13px; line-height:25px; } table{ border-top: ...

  3. BootStrap table动态增删改表格内数据

    1:添加一个[操作]列   { title: "操作", align: 'center', valign: 'middle', width: 160, // 定义列的宽度,单位为像 ...

  4. JS动态添加删除html

    本功能要求是页面传一个List 集合给后台而且页面可以动态添加删除html代码需求如下: 下面是jsp页面代码 <%@ page language="java" pageEn ...

  5. ASP.NET给Table动态添加删除行，并且得到控件的值

    ASP.NET给Table动态添加控件并且得到控件的值 由于跟老师做一个小的项目,可是我自己又不太懂js,所以一直为动态建立表格并且能动态的取值和赋值感到苦恼.起初在网上找到了一些js资源,解决了动态 ...

  6. JS类小功能

    工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...

  7. table 排序 添加 删除 等操作

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. 数据字典的设计--3.首页添加删除表格（JS实现）

    页面效果: JS代码: 1.添加表格 function insertRows(){ //获取表格对象 var tb1 = $("#dictTbl"); var tempRow = ...

  9. js遍历对象的属性并且动态添加属性

    var person= { name: 'zhangsan', pass: '123' , 'sni.ni' : 'sss', hello:function (){ for(var i=0;i< ...

随机推荐

  1. app生成工具

    国内主流的在线APP生成工具 应用公园:http://www.apppark.cn/ 追信魔盒:http://app.zhui.cn/ 安米网:http://www.appbyme.com/ 简网AP ...

  2. 封装log4cp p

    log4cpp 是参考 log4j 所写的 c++ 版本的写 log 的库.可以在这里下载   http://log4cpp.sourceforge.net/   我的使用方法是: 1,定义了一个 _ ...

  3. 关于DeploymentConfig的思考

    为什么是deploymentconfig而不是Kubernetes的deployment 在new-app的时候openshift直接创建了一个deploymentconfig并部署成rc,开始并不理 ...

  4. 《Go语言实战》笔记之第三章 ----包

    原文地址: http://www.niu12.com/article/10 ####包 所有的.go 文件,除了空行和注释,都应该在第一行声明自己所属的包. 每个包都在一个单独的目录里. 不能把多个包 ...

  5. iOS：对GCD中 同步、异步、并行、串行的见解

    1.GCD-同步执行多线程时          GCD中不管向什么类型的队列加同步任务,实际上都会加到当前线程中(一般为主线程). 2.GCD-异步执行多线程时          GCD中不管向什么类 ...

  6. 在移动网页网页上点击链接跳转到QQ聊天界面

    打开qq聊天窗口的方法 <a href="http://wpa.qq.com/msgrd?v=3&uin=1450612626&site=qq&menu=yes ...

  7. 【百度地图JavaScript API】手机端浏览器定位的实现

    [百度地图JavaScript API]手机端浏览器定位的实现 https://blog.csdn.net/xiao190128/article/details/72579476

  8. python版本管理--pyenv

    python版本环境管理 下载依赖 yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readli ...

  9. 算法笔记_085:蓝桥杯练习 9-3摩尔斯电码（Java）

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 摩尔斯电码破译.类似于乔林教材第213页的例6.5,要求输入摩尔斯码,返回英文.请不要使用"zylib.h",只能使用 ...

  10. 算法笔记_083:蓝桥杯练习 合并石子（Java）

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 在一条直线上有n堆石子,每堆有一定的数量,每次可以将两堆相邻的石子合并,合并后放在两堆的中间位置,合并的费用为两堆石子的总数.求把所有石子 ...