效果：

代码：

 <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. nand flash坏块管理OOB,BBT,ECC

    转:http://www.cnblogs.com/elect-fans/archive/2012/05/14/2500643.html 0.NAND的操作管理方式 NAND FLASH的管理方式:以三 ...

  2. 如何释放 DB_RECOVERY_FILE_DEST_SIZE

    转自原文 如何釋放 DB_RECOVERY_FILE_DEST_SIZE,有删减 oracle默認安裝之後,如何沒有手動設置歸檔路徑(alter system set log_archive_dest ...

  3. linux图机界面机制

    1．X WindowX Window 是由麻省理工学院(MIT)推出的窗口系统,简称X,它旨在建立不依赖于特定硬件系统的图形和文字显示窗口系统的标准.1987 年9 月,MIT 推出了X 系统的11 ...

  4. 花间美人：古风 CG插画技法

    <花间美人:古风 CG插画技法> 基本信息 作者: 猫君大白    出版社:机械工业出版社 ISBN:9787111429432 上架时间:2013-7-3 出版日期:2013 年7月 开 ...

  5. [Linux] ubuntu 安装 Wireshark

    Wireshark是一款非常流行的协议分析软件.自然可以网络抓包的需求. sudo apt-get install wireshark 出于安全方面的考虑,普通用户不能够打开网卡设备进行抓包,wire ...

  6. 【LaTeX】E喵的LaTeX新手入门教程（6）中文

    假期玩得有点凶 ._.前情回顾[LaTeX]E喵的LaTeX新手入门教程(1)准备篇 [LaTeX]E喵的LaTeX新手入门教程(2)基础排版 [LaTeX]E喵的LaTeX新手入门教程(3)数学公式 ...

  7. xmodmap使用指南

    什么是 xmodmap 改变按键的行为 修改修饰键的行为 修改鼠标按键行为 Fvwm中的修辞键使用 1. 什么是 xmodmap xmodmap 是一个在 X 图形环境下用于修改键盘和鼠标按钮映射的工 ...

  8. SQL注入深入剖析

    SQL注入是一门很深的学问,也是一门很有技巧性的学问 1.  运算符的优先级介绍 2.  SQL语句执行函数介绍 mysql_query() 仅对 SELECT,SHOW,EXPLAIN 或 DESC ...

  9. （转）Android项目重构之路:实现篇

    前两篇文章Android项目重构之路:架构篇和Android项目重构之路:界面篇已经讲了我的项目开始搭建时的架构设计和界面设计,这篇就讲讲具体怎么实现的,以实现最小化可用产品(MVP)的目标,用最简单 ...

  10. Python中PyQuery库的使用总结

    介绍 pyquery库是jQuery的Python实现,可以用于解析HTML网页内容,官方文档地址是:http://packages.python.org/pyquery/ pyquery 可让你用 ...