<html>
<head>
　　<title>添加新的行</title>
</head>
<body>
　　<div onclick="addTr()">添加</div>
　　<table id="myTable" border="1">
　　　　<input type="hidden" value="0" id="myInput"/>
　　　　<tr id="myTr0">
　　　　　　<td>姓名</td>
　　　　　　<td>性别</td>
　　　　　　<td>操作</td>
　　　　</tr>
　　</table>
</body>
</html>

<script>
　　/**
　　 * 添加一行
　　*/
　function addTr(){
　　var tab = document.getElementById("myTable");
　　var rowNum = tab.rows.length;

　　var myInput=document.getElementById("myInput").value;
　　myInput=parseInt(myInput)+1;
　　document.getElementById("myInput").value=myInput;

　　var newTr = tab.insertRow();//生成一个新的行
　　newTr.id="tr"+myInput;
　　newTd0=newTr.insertCell(0);//生成一个新的列
　　newTd0.innerText="AAAA";
　　newTd1=newTr.insertCell(1);
　　newTd1.innerText="男";
　　newTd2=newTr.insertCell(2);
　　newTd2.innerHTML="<span onclick=delRow(this)>删除"+myInput+"</span>";

　　document.getElementById("myTable").lastChild.appendChild(newTr); //添加到表格中
}
　　/**
　　* 删除一行
　　*/
　　function delRow(obj){
　　　　var tab = document.getElementById("myTable");
　　　　var parNode = obj.parentNode.parentNode.rowIndex;
　　　　tab.deleteRow(parNode);//删除一行
　　}
</script>

通过javascript添加一行的更多相关文章

  1. 利用jquery给指定的table动态添加一行、删除一行

    转自:http://www.cnblogs.com/linjiqin/p/3148181.html $("#mytable tr").find("td:nth-child ...

  2. 利用jquery给指定的table动态添加一行、删除一行，复制，值不重复等操作

    $("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列$("#mytable tr").f ...

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

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

  4. 点击按钮在表格的某一行下，在添加一行(HTML+JS)

    使用js在指定的tr下添加一个新的一行newTr html代码: <table> <tr> <td>用户名:</td> <td><in ...

  5. JQUERY动态绘制表格，实现动态添加一行，删除一行

    HTML部分 <table style="width: 100%;" id="TABYESTERDAY11"></table> < ...

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

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

  7. jquery中table里面的tr里的input添加一行，并且第一列autoincrement

    实现添加一行并且第一列由A0开始autoincrement,代码如下(在文件的同一个文件夹下添加一个jquery.js文件): <!DOCTYPE html PUBLIC "-//W3 ...

  8. 利用jquery表格添加一行并在每行第一列大写字母显示实现方法

    表格添加一行并在每行第一列大写字母显示jquery实现方法 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN& ...

  9. 仅仅需手动添加一行代码就可以让Laravel4执行在SAE (v. 1.0.0)

    Github:https://github.com/chariothy/laravel4-sae (已更新至v1.1.0) laravel4-sae (v. 1.0.0) 仅仅需手动添加一行代码就可以 ...

随机推荐

  1. 在Linux上进行内核参数调整

    在Solaris上,使用工具mdb就可以直接修改内核内存里的内容.而在Linux上,则通常使用命令sysctl(8)做类似的事情. 本文以Fedora为例,介绍如何在Linux上进行内核参数调整. 常 ...

  2. Nginx性能优化功能- Gzip压缩(大幅度提高页面加载速度)

    Nginx开启Gzip压缩功能, 可以使网站的css.js .xml.html 文件在传输时进行压缩,提高访问速度, 进而优化Nginx性能!  Web网站上的图片,视频等其它多媒体文件以及大文件,因 ...

  3. Spring IOC 源码之ResourceLoader

    转载自http://www.blogjava.net/DLevin/archive/2012/12/01/392337.html 在<深入Spring IOC源码之Resource>中已经 ...

  4. angular $q promise详解

    前言 通过本文,你大概能清楚angular promise是个啥,$q又是个啥,以及怎么用它.这里咱们先灌输下promise的思想. 下面写的全是废话,一些看着高逼格其实没什么大作用的概念,想知道$q ...

  5. python 使用 matplotlib.pyplot来画柱状图和饼图

    导入包 import matplotlib.pyplot as plt 柱状图 最简柱状图 # 显示高度 def autolabel(rects): for rect in rects: height ...

  6. Android studio的gradle

    1. gradle的基本概念 gradle构建* Android Studio使用`Gradle`构建工具,Eclipse的ADT插件使用的是`Ant`构建工具* 构建:生成app的过程,执行一些的命 ...

  7. 通过docker把本地AspNetCore WebAPI镜像打包到阿里云镜像仓库并在centos部署

    在centos上安装docker # step 1: 安装必要的一些系统工具 sudo yum install -y yum-utils device-mapper-persistent-data l ...

  8. PetaPoco源代码学习--0.目录贴

    2017年3季度后,以人力外包的形式派驻到甲方单位进行项目救急时,接触到了甲方单位的ASP.NET MVC项目的ORM框架,它以PetaPoco(2012年的老版本)进行改造升级的,当初就想学习一下这 ...

  9. asp.net的get和post请求

    asp.net的get和post请求 //获取第三方api的工具类 public class HttpUtils { public static string Get(string Url) { // ...

  10. JSON数据的各种操作

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...