效果：

代码：

 <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. 一种计算MD5的实现方法

    1.在需要用到加密的地方可以使用.net中的md5相关的类生成md5给文件加密. 2.基本思路: 将文件也好,字符串也好,转成字节数组,再利用.net的md5相关类生成md5相关字符串,再将字符串转成 ...

  2. SecureCRT connecting VM Linux show error message: The remote system refused the connection.

    SecureCRT connecting VM Linux show error message: The remote system refused the connection.

  3. 用latex写毕业论文

    用 LaTeX 写漂亮学位论文(from wloo) 序 一直觉得有必要写这样一篇文章,因为学位论文从格式上说更像一本书,与文章 的排版不同,不仅多出目录等文章没有的部分,而且一般要设置页眉页脚方便阅 ...

  4. 二十四种设计模式：迭代器模式(Iterator Pattern)

    迭代器模式(Iterator Pattern) 介绍提供一种方法顺序访问一个聚合对象中各个元素,而又不需暴露该对象的内部表示. 示例有一个Message实体类,某聚合对象内的各个元素均为该实体对象,现 ...

  5. centos7 安装selenium和firefox

    之前有一篇文章介绍过在ubuntu下安装selenium和firefox 现在介绍下centos7 注意以下都是下载的linux64位的软件,32位的请自己找下链接, 现在使用的python的版本是3 ...

  6. Jpeglib读取jpg文件 【转】

    http://blog.csdn.net/blues1021/article/details/45424695 整理自 : http://hi.baidu.com/lewutian/item/e8ee ...

  7. distance field(占坑

    signed distance field https://kosmonautblog.wordpress.com/2017/05/09/signed-distance-field-rendering ...

  8. Solr6.6 IK 中文分词的配置和使用

    1. 首先,下载IKAnalyzer ,下载 2. 将ik的相关文件 拷贝到 webapps\solr\WEB-INF\lib 目录下 或者存放solr-6.6.0\server\solr\test\ ...

  9. 编译安装mysql-5.6.40

    编译安装mysql-5.6.40 环境说明 系统版本     CentOS 7.2 x86_64 软件版本     mysql-5.6.40 [root@db01 ~]# mkdir -p /serv ...

  10. Android Studio 项目中集成百度地图SDK报Native method not found: com.baidu.platform.comjni.map.commonmemcache.JNICommonMemCache.Create:()I错误

    Android Studio 项目中集成百度地图SDK报以下错误: java.lang.UnsatisfiedLinkError: Native method not found: com.baidu ...