<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. mybatis插入数据库 返回主键

    传递参数为对象TaskEntity, 返回主键结果为Integer 与 主键 task_id 的类型一致即可 <insert id="addTask" parameterTy ...

  2. 第2章 Selenium2-java 测试环境搭建

    2.1  Window下环境搭建 2.1.1 安装Java 2.1.2 安装Eclipse (网上资源很多,就不详将了). 2.1.3 下载Java版的Selenium包. 下载地址:http://d ...

  3. Python面向对象基础一

    公司可能过一两个月就要从深圳搬到东莞松山湖,项目组的现在有的在转Java或其他语言的,问我们要不要转java+hoodap+spark方向,我还是先不转,毕竟之前是从ios转回C#,这现在在转其他的那 ...

  4. JSP与Servlet之间传值的一般方法，适合新手做练习

    #JSP与Servlet之间传值 Jsp与Servlet之间的传值有两种,一种是Jsp传值给Sevlet,另一种是Servlet传值给Jsp:使用request.response对象完成传值,具体实现 ...

  5. mybatis-generator-maven逆向工程

    在idea 中使用 mybatis的  mybatis-generator-maven-plugin  可以根据数据库 生成 dao层,pojo类,Mapper文件. 一:  在  pom.xml  ...

  6. 通过AOP自定义注解实现日志管理

    前言: 通过自定义注解和AOP结合的方式,实现日志的记录功能 大致流程:项目运行->用户操作调用业务处理类->通过自定义的注解(我理解为一个切点)->进入到AOP切面类(在这里可以获 ...

  7. 从实例角度分析java的public、protected、private和default访问权限

    一.public 同一个package 1.本类内部 public class A { public int f=1; public void m1() {} public void m2() { f ...

  8. Only fullscreen activities can request orientation

    问题 当我们把targetSdkVersion升级到27,buildToolsVersion和相关的support library升级到27.0.2后,在Android 8.0(API level 2 ...

  9. Redis-五种数据类型解析

    redis 五种数据结构详解(string,list,set,zset,hash) Redis不仅仅支持简单的key-value类型的数据,同时还提供list,set,zset,hash等数据结构的存 ...

  10. 【转】android系统常用URI

    android系统管理联系人的URI如下:ContactsContract.Contacts.CONTENT_URI 管理联系人的UriContactsContract.CommonDataKinds ...