使用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. [Xcode 实际操作]七、文件与数据-(8 )读取和解析Plist文件(属性列表文件)

    目录:[Swift]Xcode实际操作 本文将演示如何读取和解析Plist文件,即属性列表文件. 它是用来存储,串行化后的对象的文件. 在项目名称上点击鼠标右键,弹出右键菜单, 选择[New File ...

  2. 导出war包

    1. 使用Eclipse 导出 右键web工程 -> export -> war file 将导出的war文件放到tomcat安装目录的webapps下,然后启动tomcat,就会发现在该 ...

  3. require--按需加载js与模块化

    1.html中:  “<script type="text/javascript" src="js/require.js" data-main=" ...

  4. Codeforces Round #563 (Div. 2) B. Ehab Is an Odd Person

    链接:https://codeforces.com/contest/1174/problem/B 题意: You're given an array aa of length nn. You can ...

  5. F-三生三世

    链接:https://ac.nowcoder.com/acm/contest/892/F 题意: 秦皇岛的海风轻轻地唱着歌唤醒了水上的涟漪,冬日的阳光把沙滩洒满了金黄. BD哥在沙滩上留下了一串串脚印 ...

  6. MySQL数据库(3)

    外键的变种(三种关系),数据的增删改,单表查询,多表查询 一.外键的变种(三种关系) 本节重点: 如何找出两张表之间的关系 表的三种关系 一.介绍 因为有foreign key的约束,使得两张表形成了 ...

  7. scala worksheet demo

    object worksheet_lp { println("Welcome to the Scala worksheet") //> Welcome to the Scal ...

  8. 基于.NetCore2.1。服务类库采用.Net Standard2.0,兼容.net 4.6.1消息推送服务

    基于.NetCore2.1.服务类库采用.Net Standard2.0,兼容.net 4.6.1消息推送服务 https://www.cnblogs.com/ibeisha/p/weixinServ ...

  9. RESTful API设计相关

    一  RESTful架构 在当今时代,越来越多人意识到了网站即软件. 这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high laten ...

  10. wpf ComboBox的SelectionBoxItem相关依赖属性

    以前没有注意SelectionBoxItem相关依赖属性,这几天看wpf源码 特意研究了一番 <Style x:Key="ComboBoxStyle1" TargetType ...