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 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
Ext面向对象开发实践(续)
Nov 18 Javascript
JavaScript 设计模式学习 Factory
Jul 29 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
几行js代码实现自适应
Feb 24 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
js实现一个简易计算器
Mar 30 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 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
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
php db类库进行数据库操作
2009/03/19 PHP
php print EOF实现方法
2009/05/21 PHP
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
工作中常用到的ES6语法
2018/09/04 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
详解datagrid使用方法(重要)
2020/11/06 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
python实现二叉查找树实例代码
2018/02/08 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
python二进制文件的转译详解
2019/07/03 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
机械系大学毕业生推荐信
2013/11/27 职场文书
质量月活动策划方案
2014/03/10 职场文书
销售团队激励口号
2014/06/06 职场文书
毕业证委托书范文
2014/09/26 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
医院员工辞职信范文
2015/05/12 职场文书