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 表单取值常用代码
Dec 22 Javascript
GreyBox技术总结(转)
Nov 23 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
jQuery中prev()方法用法实例
Jan 08 Javascript
去除html代码里面的script正则方法
May 19 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
JS实现带动画的回到顶部效果
Dec 28 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 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中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
php在apache环境下实现gzip配置方法
2015/04/02 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
js三种排序算法分享
2012/08/16 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
python 中的列表解析和生成表达式
2011/03/10 Python
详解Python中的join()函数的用法
2015/04/07 Python
详解Python中用于计算指数的exp()方法
2015/05/14 Python
python基础练习之几个简单的游戏
2017/11/10 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
python实现五子棋人机对战游戏
2020/03/25 Python
python的常见矩阵运算(小结)
2019/08/07 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
python中pickle模块浅析
2020/12/29 Python
J2EE包括哪些技术
2016/11/25 面试题
党员自我评价分享
2013/12/13 职场文书
初中校园之声广播稿
2014/01/15 职场文书
《理想》教学反思
2014/02/17 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技
golang定时器
2022/04/14 Golang
Django框架中模型的用法
2022/06/10 Python
Python中的socket网络模块介绍
2022/07/23 Python