jQuery实现html表格动态添加新行的方法


Posted in Javascript onMay 28, 2015

本文实例讲述了jQuery实现html表格动态添加新行的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Add Row example</title>
<script src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
<!-- jQuery Code will go underneath this -->
$(document).ready(function () {  
 // Code between here will only run when the document is ready
 $("a[name=addRow]").click(function() {
  // Code between here will only run 
  //when the a link is clicked and has a name of addRow
  $("table#myTable tr:last").after('<tr><td>Row 4</td></tr>');
  return false;
 });
});
</script>
</head>
<body>
<table style="width: 100%" id="myTable">
<tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
</table>
<a href="#" name="addRow">Add Row</a>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
IE6 hack for js 集锦
Sep 23 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
Vue获取微博授权URL代码实例
Nov 04 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
jquery实现用户打分评分特效
May 28 #Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 #Javascript
javascript转换静态图片,增加粒子动画效果
May 28 #Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 #Javascript
javascript实现行拖动的方法
May 27 #Javascript
JavaScript操作Cookie方法实例分析
May 27 #Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 #Javascript
You might like
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
任意位置显示html菜单
2007/02/01 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
详解Python用户登录接口的方法
2019/04/17 Python
Django中信号signals的简单使用方法
2019/07/04 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
金讯Java笔试题目
2013/06/18 面试题
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
如何写好升职自荐信
2014/01/06 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
高中生的自我评价
2014/03/04 职场文书
爱心捐款倡议书
2014/04/14 职场文书
团队精神的演讲稿
2014/05/14 职场文书
教室布置标语
2014/06/26 职场文书
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
苏州园林导游词
2015/02/03 职场文书
房产电话营销开场白
2015/05/29 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers