<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. Java队列——线程池创建的例子

    线程池为线程生命周期开销问题和资源不足问题提供了解决方案.通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上.其好处是,因为在请求到达时线程已经存在,所以无意中也消除了线程创建所带来的延迟.这 ...

  2. windows10 设置软件开机启动

    在 C:\Users\your_name\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup 在这个目录下,新建你想开机启动的软 ...

  3. 【详解】核心组件之UserDetailService

    简介 UserDetails => Spring Security基础接口,包含某个用户的账号,密码,权限,状态(是否锁定)等信息.只有getter方法. Authentication => ...

  4. 【IT笔试面试题整理】二叉搜索树转换为双向链表

    [试题描述] 将二叉搜索树转换为双向链表 对于二叉搜索树,可以将其转换为双向链表,其中,节点的左子树指针在链表中指向前一个节点,右子树指针在链表中指向后一个节点. 思路一: 采用递归思想,对于二叉搜索 ...

  5. tcp/ip通信中tcp头部结构tcphdrp->check校验计算

    通过raw socket修改通信数据后,可通过函数 set_tcp_checksum1(iph); 重新校验计算iph->check值 在http://www.cnblogs.com/dpf-1 ...

  6. Microsoft Office MIME Types

    经常需要查找Microsoft Office MIME Types,终于在MSDN网上找到,摘录如下,以备查阅与参考:http://blogs.msdn.com/b/vsofficedeveloper ...

  7. 百度地图API，根据经纬度实现车辆移动轨迹绘制

    百度地图,实现车辆轨迹绘制 实现思路: 1.根据经纬度实现车辆轨迹绘制 2.使用百度地图API的两个覆盖物实现,Polyline(折线)绘制轨迹,Marker(图标)绘制小车图标 3.将每两个坐标间连 ...

  8. Join 具体用法

    一.Join 语法概念 Join 按照功能可分为三大类: left join (左连接) 即:取左边表的全部数据,即使右边表没有对应的数据,也是会把左边表的数据取出来,并返回 right join(右 ...

  9. Jquery/js引入的button的onclik事件只触发一次

    目标描述 我要实现的是:通过监听button的click事件,从而通过ajax向servlet发送请求获取数据库中的数据,然后返回的页面,并要求局部刷新 一次页面的加载是html直接页面初始化本身的 ...

  10. [转载] Spring框架——AOP前置、后置、环绕、异常通知

    通知类型: 步骤: 1. 定义接口 2. 编写对象(被代理对象=目标对象) 3. 编写通知(前置通知目标方法调用前调用) 4. 在beans.xml文件配置 4.1 配置 被代理对象=目标对象 4.2 ...