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中键盘事件小结
Feb 24 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
Vue简单实现原理详解
May 07 Javascript
Postman动态获取返回值过程详解
Jun 30 Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 Javascript
如何理解Vue前后端数据交互与显示
May 10 Vue.js
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
关于svn冲突的解决方法
2013/06/21 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
python操作字典类型的常用方法(推荐)
2016/05/16 Python
Django卸载之后重新安装的方法
2017/03/15 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
Python的Lambda函数用法详解
2019/09/03 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
Python extract及contains方法代码实例
2020/09/11 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
自我鉴定怎么写
2013/12/05 职场文书
办加油卡单位介绍信
2014/01/09 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
总经理任命书范本
2014/06/05 职场文书
幼师辞职信范文
2015/02/27 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
结婚司仪主持词
2015/06/29 职场文书
公司安全管理制度范本
2015/08/05 职场文书
Python实现生活常识解答机器人
2021/06/28 Python
python manim实现排序算法动画示例
2022/08/14 Python