1.   <body>
  2.        <table id="tableID" border="1" align="center" width="60%">
  3.            <tr>
  4.                <th>用户名</th>
  5.                <th>邮箱</th>
  6.                <th>操作</th>
  7.            </tr>
  8.            <tbody id="tbodyID">
  9.                <!-- 动态增加行
  10.                <tr>
  11.                    <td>用户名</td>
  12.                    <td>邮箱</td>
  13.                    <td><input/></td>
  14.                </tr>
  15.                -->
  16.            </tbody>
  17.        </table>
  18.        <hr/>
  19.        用户名：<input type="text" id="usernameID"/>
  20.        邮箱：  <input type="text" id="emailID"/>
  21.               <input type="button" value="增加" id="addID"/>
  22.    </body>
  23.    <script type="text/javascript">
  24.        //动态增加和删除表格行的内容
  25.        document.getElementById("addID").onclick=function(){
  26.          //获取用户名和邮箱
  27.          var username = document.getElementById("usernameID").value;
  28.          var email = document.getElementById("emailID").value;
  29.          //判断
  30.          if(username!=null && email!=null){
  31.              //创建tr元素
  32.              var trElemnet = document.createElement("tr");
  33.              //创建td元素
  34.              var td1Element = document.createElement("td");
  35.              var td2Element = document.createElement("td");
  36.              var td3Element = document.createElement("td");
  37.              //将用户名和邮箱添加到td元素
  38.              td1Element.innerHTML = username;
  39.              td2Element.innerHTML = email;
  40.              //创建按钮
  41.              var delElement = document.createElement("input");
  42.              delElement.type="button";
  43.              delElement.value="删除";
  44.              //为按钮添加单击事件
  45.              delElement.onclick=function(){
  46.                  //删除按钮所在的tr对象
  47.                  trElemnet.parentNode.removeChild(trElemnet);
  48.              }
  49.              td3Element.appendChild(delElement);
  50.              //将td元素添加到tr元素中
  51.              trElemnet.appendChild(td1Element);
  52.              trElemnet.appendChild(td2Element);
  53.              trElemnet.appendChild(td3Element);
  54.              //将tr元素添加到tbody元素中
  55.              document.getElementById("tbodyID").appendChild(trElemnet);
  56.              //清空文本框中的值
  57.              document.getElementById("usernameID").value="";
  58.              document.getElementById("emailID").value="";
  59.          }else{
  60.              window.alert("用户名和密码必填");
  61.          }
  62.        }
  63.    </script>

js 动态增加行删除行的更多相关文章

  1. GridView动态增加行

    GridView动态增加行GridView动态增加行 很多时候,我们需要可编辑的表格,来比较方便的进行数据的录入,比如学习成绩的录入.当然这就要求能够动态的增加行,来一次性录入多个学生的信息.现在用A ...

  2. JQuery实现表格动态增加行并对新行添加事件

    实现功能: 通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢:通过此程序实现表格动态增加行,一直保持最下面有多个空白行. 效果: 一:原始页面 二:表1增加新行并 ...

  3. C#点击按钮用DataGridView动态增加行、删除行，增加按钮列

    原来有一行: 点击添加,在下面增加同样的一行 新增加的行有一列删除按钮,点击某行的删除按钮时,删除当前行 方法: 哈哈,我果然好聪明啊 1.文本框.文本框.添加按钮 2.一个DataGridView( ...

  4. js 动态添加行，删除行，并获得select中值赋予 input

    <html> <head>  <title>Ace Test</title>  <script type="text/javascrip ...

  5. js动态添加、删除行

    <meta charset="utf-8"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transiti ...

  6. JQUERY方法给TABLE动态增加行

    比如设置table的id为tabvar trHTML = "<tr><td>...</td></tr>"$("#tab&q ...

  7. Javascript 给table动态增、删除行

    操作 HTML DOM Table 对象 即可 http://www.runoob.com/jsref/dom-obj-table.html 动态给一个元素焦点,用focus()方法

  8. poi读取Excel模板并修改模板内容与动态的增加行

    有时候我们可能遇到相当复杂的excel,比如表头的合并等操作,一种简单的方式就是直接代码合并(浪费时间),另一种就是写好模板,动态的向模板中增加行和修改指定单元格数据. 1.一个简单的根据模板shee ...

  9. jquery表格动态增删改及取数据绑定数据完整方案

    一 前言 上一篇Jquery遮罩插件,想罩哪就罩哪! 结尾的预告终于来了. 近期参与了一个针对内部员工个人信息收集的系统,其中有一个需求是在填写各个相关信息时,需要能动态的增加行当时公司有自己的解决方 ...

随机推荐

  1. 在JTextField中监听回车键,并执行相应按钮

    在jbInit() 中加入jTextField1的按键监听,代码如下:    jTextField1.addKeyListener(new KeyAdapter(){       public voi ...

  2. 完全理解Gson（1）：简单入门

    GSON是Google开发的Java API,用于转换Java对象和Json对象.本文讨论并提供了使用API的简单代码示例.更多关于GSON的API可以访问:http://sites.google.c ...

  3. kafka-manager：kafak的管理界面的安装和使用

    下载打包 release下载:https://github.com/yahoo/kafka-manager/releases 源码位置:https://github.com/yahoo/kafka-m ...

  4. freetds简介、安装、配置及使用介绍

    什么是FreeTDS 简单的说FreeTDS是一个程序库,可以实现在Linux系统下访问微软的SQL数据库! FreeTDS 是一个开源(如果你喜欢可以称为自由)的程序库,是TDS(表列数据流 )协议 ...

  5. 第四章 第一个rabbitmq程序

    rabbitmq消息发送模型 要素: 生产者 消费者 交换器:生产者将消息发送到交换器 队列:交换器通过某种路由规则绑定到指定队列,将消息加入队列,消费者从队列消费消息 前提: 引入rabbitmq的 ...

  6. go语言基础之go猜数字游戏

    1. 产生一个随机的4位数 示例1: package main import "fmt" import "math/rand" import "tim ...

  7. iOS开发-iPad侧边栏Tab选项卡切换

    Android中习惯了叫侧边栏,iOS中如果不习惯侧边栏称呼的话可以叫dock,侧边栏的切换,类似于Android中的底部导航栏的切换,iPad尺寸大了一些,导航的栏目放在侧边会显示的更好耐看一些.选 ...

  8. quickcocos2dx framework环境变 fatal error C1083: 无法打开源文件:“.Box2D/Dynamics/b2World.h”: No such file or d

      : fatal error C1083: 无法打开源文件:".Box2D/Dynamics/b2World.h": No such file or directory 解决方法 ...

  9. （转）<Unity3D>Unity3D在android下调试

    转自:http://blog.csdn.net/zuoyamin/article/details/11827309 一.工具准备 1.JDK——由于android是基于Java平台开发的,jdk是必须 ...

  10. 在Foreda上安装apache-tomcat-7.0.42.tar.gz

    开发环境JDK和Tomcat应该和部署环境一致,要不容易出现奇奇怪怪的问题.所以Aspire机器上的Tomcat要装一个新版本了. 装Tomcat基本等于一个解压和移动的过程,确实简单. 第一步:解压 ...