使用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. Keras AttributeError 'NoneType' object has no attribute '_inbound_nodes'

    问题说明: 首先呢,报这个错误的代码是这行代码: model = Model(inputs=input, outputs=output) 报错: AttributeError 'NoneType' o ...

  2. 《深入理解Java虚拟机》笔记01 -- 运行时数据区

    运行时数据区示意图 1. 程序计数器 占用一块较小的内存空间,它可以看作是当前线程所执行的字节码的行号指示器.主要用来记录线程执行到哪条语句了,分支.循环.跳转.异常处理.线程恢复等功能都需要依赖这个 ...

  3. 黑马旅游网配置 pom.xml

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  4. 【BZOJ2428】均分数据

    题解 先说说黄学长的做法: 当温度比较高的时候,贪心 每次随机一个数,把他放进当前和最少的那一组里面 温度足够低的时候就完全随机然后转移 对于一个排列,分组强制连续 答案显然唯一,做一遍(dp)就好 ...

  5. [LOJ 2082] 「JSOI2016」炸弹攻击 2

    [LOJ 2082] 「JSOI2016」炸弹攻击 2 链接 链接 题解 枚举发射源,将发射源当做原点,对敌人和激光塔极角排序. 由于敌人纵坐标均为正,而其它点均为负,因此每两个角度差在 \(\pi\ ...

  6. I.Algorithm Choosing Mushrooms

    链接:https://ac.nowcoder.com/acm/contest/908/I 题意: Baby bear and his good friends are very fond of mus ...

  7. 基于JAVA的设计模式之单例模式

    概念 于大二上学期面向对象C++期中考试中有这么道题:一个Computer有多个USB插口,那么意味着这台电脑可以插多个鼠标,但是无论你如何拔插多少个鼠标,桌面上的鼠标一直只显示一个,且多个硬件鼠标都 ...

  8. zTree的重点

    今天学习了zTree插件,记录一下使用步骤: 1 下载,把下载好的目录整个放在项目中 文件夹目录: js:一般引这jquery.ztree.all.js和jquery.ztree.core.js cs ...

  9. Java定时器Timer,TimerTask每隔一段时间随机生成数字

    1:java.util.Timer类是一种工具,线程用其安排以后在后台线程中执行的任务.可安排任务执行一次,或者定期重复执行. 2:TimerTask类是由 Timer 安排为一次执行或重复执行的任务 ...

  10. jquery中使用each遍历。

    一直知道each这个方法,但是就是不太明白到底怎么用,今天两个地方都使用了each.真的太高兴了,太有成就感了. 东钿微信平台订单列表页 全部订单之前是按照产调,评估,借款的顺序依次排下来,华总说要按 ...