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 相关文章推荐
JS支持带x身份证号码验证函数
Aug 10 Javascript
My Desktop :) 桌面式代码
Dec 29 Javascript
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
深入探讨前端框架react
Dec 09 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
Angular4 中常用的指令入门总结
Jun 12 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
vue-cli设置publicPath小记
Apr 14 Javascript
vue+element实现图片上传及裁剪功能
Jun 29 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文件怎么打开 如何执行php文件
2011/12/21 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
JavaScript中的style.display属性操作
2013/03/27 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
Python遍历目录中的所有文件的方法
2016/07/08 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
Python同步遍历多个列表的示例
2019/02/19 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
TensorFlow:将ckpt文件固化成pb文件教程
2020/02/11 Python
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
网络程序员自荐信
2014/01/25 职场文书
企业标语口号
2014/06/10 职场文书
雷锋观后感
2015/06/10 职场文书
休学证明范本
2015/06/19 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
整理Python中常用的conda命令操作
2021/06/15 Python