<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. Autowired使用说明

    使用了那么久Spring,一下子问我Autowired注解使用条件,答不上来吧,看了Spring源码,一点点收货: 废话少说,要是Autowired生效,需要注册BeanPostProcessor,你 ...

  2. What is AMQP? and the architecture

    What is AMQP? (Advanced Message Queuing Protocol) When two applications need to communicate there ar ...

  3. c++/c 获取cpp文件行号跟文件名

    编译器内置宏: 先介绍几个编译器内置的宏定义,这些宏定义不仅可以帮助我们完成跨平台的源码编写,灵活使用也可以巧妙地帮我们输出非常有用的调试信息. ANSI C标准中有几个标准预定义宏(也是常用的): ...

  4. 【MongoDB-MongoVUE图像管理工具】

    介绍一款很不错的开源的MongoDB图形化管理工具:MongoVUE . MongoVUE 1.6.9 破解版,下载地址.    

  5. Windows7下IIS+php配置教程 http://www.jb51.net/article/113812.htm

    这篇文章主要为大家详细介绍了Windows7下IIS+php配置教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 WINDOWS 7 IIS+php配置教程,具体内容如下 打开 开始 -> ...

  6. [android] WebView自定义浏览器

    在布局文件中添加<EditText/>和<Button/>控件, 在布局文件中添加<WebView/>控件 在Activity中获取WebView对象 调用WebV ...

  7. 【Linux】apt-get 源地址汇总

    修改etc/apt/sources.list文件 deb http://mirrors.163.com/ubuntu/ lucid main restricted universe multivers ...

  8. 【Java并发编程】7、线程池

    1. 为什么使用线程池 诸如 Web 服务器.数据库服务器.文件服务器或邮件服务器之类的许多服务器应用程序都面向处理来自某些远程来源的大量短小的任务.请求以某种方式到达服务器,这种方式可能是通过网络协 ...

  9. 解决hash冲突之分离链接法

    解决hash冲突之分离链接法 分离链接法:其做法就是将散列到同一个值的所有元素保存到一个表中. 这样讲可能比较抽象,下面看一个图就会很清楚,图如下 相应的实现可以用分离链接散列表来实现(其实就是一个l ...

  10. 解决：oracle+myBatis ResultMap 类型为 map 时，表字段类型有 Long/Blob/Clob 时报错

    前言:最近在做一个通用查询单表的组件,所以 sql 的写法就是 select *,然后 resultType="map" .如果数据库中的表里有字段类型为 Long 等类型时,my ...