使用js在指定的tr下添加一个新的一行newTr

html代码:

<table>

  <tr>

    <td>用户名:</td>

    <td><input type="text" name="username"></td>

  </tr>

  <tr>

    <td>密码:</td>

    <td><input type="text" name="password"></td>

  </tr>

  <tr>

    <td colspan=2>

      <input type="button" name="add" value="在密码行后添加一行" onclick="addTr()">

    </td>

  </tr>

</table>

javascript代码:

<script>

  function addTr(){

    var tb=document.getElementById("table1");

    var newTr=tb.insertRow(2);//表示在第二行后添加一行

    var newTd=newTr.insertCell();//表示在添加的行上添加第一格

    newTd.innerHTML="邮箱:";

    var newTd2=newTr.insertCell();//表示在添加的行上添加第二格

    newTd.innerHTML="<input type='text' name='email' />";

  }

</script>

点击按钮在表格的某一行下,在添加一行(HTML+JS)的更多相关文章

  1. JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里

    JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...

  2. [原]点击按钮,表格隔行变色:偶数行为黄色背景,奇数行为默认颜色。通过table的getElementsByTagName取得所有的tr,依次遍历,如果是偶数就…………。

    window.onload = function () { document.getElementById('btn').onclick = function () {                 ...

  3. DataGridView添加一行数据、全选、取消全选、清空数据、删除选中行

    .net 2005下的Windows Form Application,一个DataGridView控件和4个Button,界面设置如下:         代码如下,有注解,相信大家都看得明白:   ...

  4. element+vue点击新增表格内在已有数据添加一行带输入框内容

    在element+vue项目中,需求要表格内已有数据,点击新增在首行添加一行带输入框内容 table的数据为datas=[],那么下面是一列的数据,多列可循环或复制 <el-table-colu ...

  5. 【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选

    页面点击按钮添加一行    删除一行   全选   反选  全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> & ...

  6. 点击按钮添加一行,和本行的删除功能,序号变动,name属性更改

    <!--html结构--> <div> <input type="button" value="添加一行" onclick=&qu ...

  7. js实现在表格中删除和添加一行

    <!DOCTYPE html><html> <head> <title> new document </title> <meta ht ...

  8. 在网页中动态地给表格添加一行内容--HTML+CSS+JavaScript

    需求描述: 用户在页面上点击按钮,可以把文本框中的数据在表格的新的一行中显示,具体表现如下图: 如果如果输入框内容有一项为空,弹出对话框‘请将数据填入完全 步骤: 1.按钮注册单击事件 2.获取并判断 ...

  9. Py3+PyQt5+Eric6:学习记录之第一天:点击按钮获取文本框的值并输出。

    一.使用qt designer拖拽界面. 使用qtdesigner拖拽界面:

随机推荐

  1. 关于HTML5画布canvas的功能

    一.画布的使用 1.首先创建一个画布(canvas) <canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid ...

  2. 送气球.jpg(模拟)

    链接:https://ac.nowcoder.com/acm/contest/318/A 来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言5242 ...

  3. 如何安装使用windows自带的telnet服务

    控制面板->程序和功能->打开或关闭Windows功能->Telnet 客户端 [ Telnet 服务器 ] 安装完成后重启cmd telnet ip port

  4. windows 2008 r2或win7安装SP1补丁,安装sqlserver 2012

    说明:安装sql server 2012时,win7和win2008r2系统都需要打sp1补丁. 1.SP1补丁下载地址(建议用迅雷下载): http://download.microsoft.com ...

  5. 牛客网Java刷题知识点之什么是内部类、为什么要使用内部类、内部类如何使用外部类的属性和方法、成员内部类、局部内部类、静态内部类、匿名内部类

    不多说,直接上干货! 可以将一个类的定义放在另一个类的定义内部,这就是内部类. 内部类是一个非常有用的特性但又比较难理解使用的特性(鄙人到现在都没有怎么使用过内部类,对内部类也只是略知一二). 内部类 ...

  6. memcache和iptables开启11211端口

    linux下安装完memcached后,netstat -ant | grep LISTEN 看到memcache用的11211端口已在监听状态,但建立php文件连接测试发现没有输出结果,iptabl ...

  7. 次小生成树(SST)

    次小生成树(SST) 题目背景 Awson是某国际学校信竞组的一只菜鸡.Awson最近学了很多最小生成树的算法,Prim算法.Kurskal算法.消圈算法等等.正当Awson洋洋得意之时,信竞组其他大 ...

  8. 基于JAVA的设计模式之适配器模式

    适配器模式概念 适配器模式把一个类的接口变换成客户端所期待的另一个接口,从而使原本因接口不匹配而无法在一起工作的两个类能够在一起工作.比如我们突然就想看电影了,但是这个电影是AVI格式的,目前我们开发 ...

  9. JAVA基础之字节流与字符流

    个人理解: IO流就是将数据进行操作的方式,因为编码的不同,所以对文件的操作就产生两种.最好用字节流,为了方便看汉字等,(已经确定文字的话)可以使用字符流.每个流派也就分为输入和输出,这样就可以产生复 ...

  10. Java 面向对象,封装,继承

    1相关概念的理解 1.1面向过程.面向对象 面向过程与面向对象都是编程中,编写程序的一种思维方式. 面向过程的程序设计方式,是遇到一件事时,思考“我该怎么做”,然后一步步实现的过程.(职员思想) 面向 ...