<body>

       <table id="tableID" border="1" align="center" width="60%">

           <tr>

               <th>用户名</th>

               <th>邮箱</th>

               <th>操作</th>

           </tr>

           <tbody id="tbodyID">

               <!-- 动态增加行

               <tr>

                   <td>用户名</td>

                   <td>邮箱</td>

                   <td><input/></td>

               </tr>

               -->

           </tbody>

       </table>

       <hr/>

       用户名：<input type="text" id="usernameID"/>

       邮箱：  <input type="text" id="emailID"/>

              <input type="button" value="增加" id="addID"/>

   </body>

   <script type="text/javascript">

       //动态增加和删除表格行的内容

       document.getElementById("addID").onclick=function(){

         //获取用户名和邮箱

         var username = document.getElementById("usernameID").value;

         var email = document.getElementById("emailID").value;

         //判断

         if(username!=null && email!=null){

             //创建tr元素

             var trElemnet = document.createElement("tr");

             //创建td元素

             var td1Element = document.createElement("td");

             var td2Element = document.createElement("td");

             var td3Element = document.createElement("td");

             //将用户名和邮箱添加到td元素

             td1Element.innerHTML = username;

             td2Element.innerHTML = email;

             //创建按钮

             var delElement = document.createElement("input");

             delElement.type="button";

             delElement.value="删除";

             //为按钮添加单击事件

             delElement.onclick=function(){

                 //删除按钮所在的tr对象

                 trElemnet.parentNode.removeChild(trElemnet);

             }

             td3Element.appendChild(delElement);

             //将td元素添加到tr元素中

             trElemnet.appendChild(td1Element);

             trElemnet.appendChild(td2Element);

             trElemnet.appendChild(td3Element);

             //将tr元素添加到tbody元素中

             document.getElementById("tbodyID").appendChild(trElemnet);

             //清空文本框中的值

             document.getElementById("usernameID").value="";

             document.getElementById("emailID").value="";

         }else{

             window.alert("用户名和密码必填");

         }

       }

   </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. c3p0、dbcp、proxool、BoneCP比较

    1.1 测试环境: 操作系统:windows xp sp3 数据库:mysql 5.1 1.2 测试条件: initialSize=30; maxSize=200; minSize=30; 其余参数为 ...

  2. 利用UIWebView获取userAgent需要注意的地方

    网络通信有时候需要传递参数userAgent,iOS中获取userAgent很简单. UIWebView* webView = [[UIWebView alloc] initWithFrame:CGR ...

  3. iOS宏(自己使用,持续更新)

    // 直接从RGB取颜色(RGB 0xFF00FF)#define UICOLOR_FROM_RGB(rgbValue) \[UIColor colorWithRed:((float)((rgbVal ...

  4. android之截屏(包括截取scrollview与listview的)

    public class ScreenShot { // 获取指定Activity的截屏,保存到png文件 public static Bitmap takeScreenShot(Activity a ...

  5. P值(P-value)，“差异具有显著性”和“具有显著差异”

    郑冰刚提到P值,说P值的定义(着重号是笔者加的,英文是从WikiPedia摘来的): P值就是当原假设为真时,比所得到的样本观察结果更极端的结果出现的概率. The P-value is the pr ...

  6. OpenCV学习(26) 直方图(3)

    本章中我们学习一下通过backproject直方图,得到一副图像中每个像素属于该直方图的概率.在下边原始图中(左图),我们框选了一块四边形的区域,计算该区域的灰度直方图,然后通过下面的函数calcBa ...

  7. xp局域网共享设置

    xp在局域网内的每一台机子做以下一些设置:1.启用Guest(来宾)帐户:控制面板--用户帐户或者在管理工具--计算机管理--本地用户和组--右键Guest属性--去掉帐户已停用 前的勾.2.允许Gu ...

  8. Informatica 常用组件Lookup之九 配置未连接的查找转换

    在映射中,未连接的查找转换与管道是分开的.您可以使用 :LKP 引用限定符编写表达式以调用其它转换中的查找.未连接查找的常用用法包括: 测试表达式中某个查找的结果 基于查找结果过滤行 基于查找的结果将 ...

  9. Informatica 常用组件Filter之三 创建FIL

    在 Designer 中,切换到 Mapping Designer 并打开映射. 选择"转换-创建". 选择"过滤器转换",然后输入新的转换名称.过滤器转换的命 ...

  10. 第二章 Java浮点数精确计算

    1.实际意义 在实际开发中,如果需要进行float或double的精确计算(尤其是财务计算),直接使用float或double是不行的(具体的例子看下边的代码的main方法的测试结果),需要使用Big ...