<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. ExecutorService——<T> Future<T> submit（Callable<T> task）

    提交一个有返回值的任务用于执行,且返回一个Future对象,用来表示行将发生的任务的结果. 如果任务执行成功的话,那么Future对象的get方法将会返回任务的执行结果T.   如果你想要立即阻塞,等 ...

  2. postman环境变量 全局变量清理

    一:主要内容 清除一个环境变量.全局变量 清除全部环境变量.全局变量 清除部分环境变量.全局变量 二:清除一个指定环境变量.全局变量 1. 清除一个环境变量,如清除用户名环境变量,username为变 ...

  3. QT QPushButton

    #include<QApplication> #include<QWidget> #include<QPushButton> #include<QMenu&g ...

  4. Linux 技巧：让进程在后台可靠运行的几种方法（转）

    我们经常会碰到这样的问题,用 telnet/ssh 登录了远程的 Linux 服务器,运行了一些耗时较长的任务, 结果却由于网络的不稳定导致任务中途失败.如何让命令提交后不受本地关闭终端窗口/网络断开 ...

  5. 第3章:Hadoop分布式文件系统(1)

    当数据量增大到超出了单个物理计算机存储容量时,有必要把它分开存储在多个不同的计算机中.那些管理存储在多个网络互连的计算机中的文件系统被称为"分布式文件系统".由于这些计算机是基于网 ...

  6. 机器学习之scikit-learn库的使用

    1.scikit-learn库简介 scikit-learn是一个整合了多种常用的机器学习算法的Python库,又简称skLearn.scikit-learn非常易于使用,为我们学习机器学习提供了一个 ...

  7. 检测锁及死锁详细信息，及sql语句

    SELECT SessionID = s.Session_id, l.request_session_id spid, a.blocked, a.start_time, a.ecid, OBJECT_ ...

  8. SQL 拼接多个字段的值&一个字段多条记录的拼接

    如student表: studentID studentName studentScore 01 Alice 90 02 Bill 95 03 Cindy 100 一.拼接多个字段的值 select ...

  9. ASP.NET MVC5中的数据注解(转载)

    ASP.NET MVC5中Model层开发,使用的数据注解有三个作用: 数据映射(把Model层的类用EntityFramework映射成对应的表) 数据验证(在服务器端和客户端验证数据的有效性) 数 ...

  10. C# Windows程序窗口置前台的几种方法

    这个是从别的地方看来的,放我这里 第一种:SetForegroundWindow,这个方法时灵时不灵.有人说,在自己的程序里把自己的窗口之前一般就不灵,而置前其它程序的窗口就灵.我觉得这是有原因的:当 ...