使用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. 2017-9-9 NOIP模拟赛

    站军姿 2bc*cosA=b^2+c^2-a^2 #include<cstdio> #include<cstdlib> #include<cmath> #inclu ...

  2. Linux上安装Apache服务器

    http://httpd.apache.org/download.cgi httpd-2.4.29.tar.gz #创建httpd用户 groupadd httpd useradd -g httpd ...

  3. node学习(2)-路由读取图片

    通常我们开发项目的时候都要用到图片,那么nodejs是如何读取图片的呢? 我们来看一下,因为一个网页中图片的数量是不确定的,而我们不能每一张图片都去写它的src路径,这时候最好的方法就是写一个专门读取 ...

  4. JavaScript进阶 - 第3章 一起组团(数组)

    第3章 一起组团(数组) 3-1 一起组团(什么是数组) 我们知道变量用来存储数据,一个变量只能存储一个内容.假设你想存储10个人的姓名或者存储20个人的数学成绩,就需要10个或20个变量来存储,如果 ...

  5. loj6198谢特 后缀数组+并查集+Trie

    先把问题放在后缀数组上考虑 已知两个数组a b,求min(a[i],...,a[j])+(b[i]^b[j])的最大值 套路题 初始每个点都是一个小连通块 把a按从大到小的顺序加入,计算当前加入边作为 ...

  6. 紫书140例题6-2 铁轨&&UVa514

    某城市有一个火车站,铁轨铺设如图6-1所示.有n节车厢从A方向驶入车站,按进站顺序编号为1~n.你的任务是判断是否能让它们按照某种特定的顺序进入B方向的铁轨,并驶出车站.例如,出栈顺序(5 4 1 2 ...

  7. CSS标签大全

    CSS常用标签 字体属性:(font) 大小:font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 :font-styl ...

  8. TaskFactory单例模式利用xml

    /** * * Copyright (c) 1995-2009 Wonders Information Co.,Ltd. * 1518 Lianhang Rd,Shanghai 201112.P.R. ...

  9. idea svn操作

    https://blog.csdn.net/bug_love/article/details/72875511

  10. Net Core开源日志框架

    Net Core开源日志框架 Exceptionless - .Net Core开源日志框架 作者:markjiang7m2原文地址:https://www.cnblogs.com/markjiang ...