效果：

代码：

 <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. iptables复习记忆

    inner_net="10.0.0.0/8,192.168.0.0/16" int_if="eth0" ext_if="eth1" 一.基本 ...

  2. 简单理解SNAT回流中的概念：路由器怎么知道外网返回的数据是局域网中哪台主机的

    内网到外网用的是NAT技术(地址封装)外网到内网用的是端口映射(PNAT)计算机的端口又65535(0-65534),你说的那些有名气的端口大多都是0-1023之间的你说的这个问题很简单,但首先你要懂 ...

  3. [译]SQL数据库迁移：从低版到高版本

    我见过太多的数据库管理员花大量的时间在数据库迁移上,即便在客户的实际环境亦是如此.由于微软频繁的发布新版,基于业务和客户的要求,应用服务不得不同时升级.当然,还有许多用户仍在使用SQL Server ...

  4. [Git] git revert ( revert commit 和 revert merge)

    转载自:http://blog.csdn.net/qinjienj/article/details/7621887 我们难免会因为种种原因执行一些错误的commit / push,git提供了reve ...

  5. cas如何去掉HTTPS认证？

    说明:默认情况下HTTP也是可以访问CAS SERVER的,但认证,登陆,退出等操作均没有任何的效果.所以必须作出下面的修改  1.进入WEB-INF\spring-configuration目录 打 ...

  6. delphi 查看编译版本

    对照表: http://docwiki.embarcadero.com/RADStudio/Tokyo/en/Compiler_Versions procedure TForm1.Button1Cli ...

  7. 关于Django迁移出现问题

    关于Django迁移出现问题 源码: #coding:utf- from django.db import models # Create your models here. class BookIn ...

  8. Java 根据IP获取地址

    用淘宝接口:(源码:java 根据IP地址获取地理位置) pom.xml: <!-- https://mvnrepository.com/artifact/net.sourceforge.jre ...

  9. 【笔记】js 关于定时器的理解

    总所周知 js 里面的 setTimeout() 方法是用来设定某些功能在某段时间间隔之后执行的.但是今天看了高程对定时器的描述发现并不是这样. setTimeout(function(){ //.c ...

  10. dubbo forbid 注意的几种方式

    1.检查所调用的项目模块是否起来了 2.如果起来后,检查该模块配置是否正确 3.服务端起来后与管理端的项目内容不一致(比如服务端增加了东西,管理端没有更新)