效果：

代码：

 <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. <摘录>简述configure、pkg-config、pkg_config_path三者的关系

    一.什么是configure 源码安装过程中大多会用到configure这个程序,一般的configure都是一个script,执行时可以传入必要参数告知配置项目. configure程序它会根据传入 ...

  2. JS/JQuery判断是否移动设备+JS/JQuery判断浏览器类型

    原文:https://blog.csdn.net/Little_Stars/article/details/48624669 JS代码如下(点击事件依赖JQuery): //判断设备类型 $(&quo ...

  3. ECCV 2014 Oral Paper

    今年的ECCV 的paper已经挂到了网上.本文整了当中Oral Paper. 一,Tracking and Activity Recognition

  4. 流畅的python第五章一等函数学习记录

    在python中,函数是一等对象,一等对象是满足以下条件的程序实体 1在运行时创建 2能复制给变量或数据结构的元素 3能作为参数传给函数 4能作为函数的返回结果 高阶函数(接受函数作为参数或者把函数作 ...

  5. transparent shadow caster unity

    https://forum.unity.com/threads/semitransparent-shadows.276490/ semitransparent shadows dither 类似alp ...

  6. ASP.NET获取网站根目录(路径)

    摘自: http://blog.sina.com.cn/s/blog_7d0dcba60100vb7r.html 网站在服务器磁盘上的物理路径: HttpRuntime.AppDomainAppPat ...

  7. 一个故事讲清NIO

    假设某银行只有10个职员.该银行的业务流程分为以下4个步骤: 1) 顾客填申请表(5分钟): 2) 职员审核(1分钟): 3) 职员叫保安去金库取钱(3分钟): 4) 职员打印票据,并将钱和票据返回给 ...

  8. ZT：没有谁的成功是横空出世

    这世上,没有谁的成功是横空出世. 你看到的胸有成竹,是别人犯过错后的顿悟: 你看到的举重若轻,是别人跌过跤后的自省: 你看到的闪亮光环,是一个人咬牙走了很久的夜路,才为自己点亮的一盏灯. 你以为自己输 ...

  9. SonarQube install on Kubernetes

    Sonarqube搭建代码 apiVersion: extensions/v1beta1 kind: Deployment metadata: name: postgres labels: app: ...

  10. android adb 权限改动

    1. 改动 ADB ROOT权限: system/core$ git diff adb/adb.c diff --git a/adb/adb.c b/adb/adb.c index 99bea0f.. ...