使用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. 宽度设置百分比 高度跟宽度一样css解决方案

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. floyd判环算法(龟兔赛跑算法)

    floyd判环算法(龟兔赛跑算法) 注意,这个算法是用来判断一条链+一条环的图,环的长度或者环与链的交界处的,所以此floyd非彼floyd(虽然都是一个人想出来的). (图不是我的) 如果只要求环的 ...

  3. css布局知识点汇总

    昨天早上看到了一篇很棒的文章,这篇文章将布局的一些知识点整理的很不错.我也想整理一下,这样在以后的项目中可以活学活用,避免只用一种方式. 参考文章:https://segmentfault.com/a ...

  4. 内置对象(Math对象、Date对象、Array对象、String对象)常用属性和方法

    Math对象 Math 是一个内置对象, 它具有数学常数和函数的属性和方法.不是一个函数对象. 与其它全局对象不同的是, Math 不是一个构造函数.  Math 的所有属性和方法都是静态的. 跟数学 ...

  5. Sublime Text 3 配置 sass

    先安装Sublime Text的sass 和 sass build插件, Sublime Text新建一个test.scss文件 $color: #369;  body {     backgroun ...

  6. 黑马学习MyBatis 用MyBatis对表进行条件查询 模糊查询 动态sql

    package cn.itcast.domain; /* CREATE TABLE `message` ( `id` int(11) NOT NULL, `command` varchar(16) D ...

  7. DRF教程8-过滤

    在写后端api时,经常需要使用各种过滤条件,可以使用Q对查询集进行过滤,这里介绍一个新玩意儿 以下是基础文档 https://django-filter.readthedocs.io/en/maste ...

  8. urllib2基础操作

    Urllib2基础操作 1.打开网页(urlopen) 打开一个网页 import urllib2 response = urllib2.urlopen('http://www.baidu.com') ...

  9. 我所接触到的JWT

    名称:JWT--->Json Web Token 用途:客户端请求服务端API时的认证方式之一 用法: 优点: 体积小(一串字符串),因而传输速度快 支持跨域验证,多应用于单点登录 传输方式多样 ...

  10. Tkinter 的三大布局管理器 pack、grid 和 place用法汇总

    学习python的tkinter免不了要对各个组件进行位置的排放与设定,常用的布局管理器有grid,pack和place.这三种均用于同一父组件下的组件布局,但是也是有区别的,先看下他们各自的含义吧. ...