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 相关文章推荐
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
Jan 18 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
js实现登录时记住密码的方法分析
Apr 05 Javascript
vue实现购物车加减
May 30 Javascript
JS异步宏队列与微队列原理区别详解
Jul 02 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
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
jquery里的each使用方法详解
2010/12/22 Javascript
重写javascript中window.confirm的行为
2012/10/21 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
JavaScript实现简单图片轮播效果
2017/08/21 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
php使用递归与迭代实现快速排序示例
2014/01/23 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
Python yield的用法实例分析
2020/03/06 Python
关于Keras Dense层整理
2020/05/21 Python
PyTorch安装与基本使用详解
2020/08/31 Python
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
什么是View State?
2013/01/27 面试题
结构和类有什么异同
2012/07/16 面试题
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
怎样声明一个匿名的内部类
2016/06/01 面试题
幼儿园老师辞职信
2014/01/20 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
施工安全责任书范本
2014/07/24 职场文书
会计岗位说明书
2014/07/29 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
html form表单基础入门案例讲解
2021/07/15 HTML / CSS