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 相关文章推荐
Array的push与unshift方法性能比较分析
Mar 05 Javascript
jQuery中height()方法用法实例
Dec 24 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
聊一聊JavaScript作用域和作用域链
May 03 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 Javascript
js实现动态显示时间效果
Mar 06 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
React Native 环境搭建的教程
Aug 19 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
JavaScript实现简单图片切换
Apr 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中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
php 页面执行时间计算代码
2008/12/04 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
js数组操作常用方法
2014/05/08 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
layui导航栏实现代码
2017/05/19 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
JS document对象简单用法完整示例
2020/01/14 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
python数据结构之链表详解
2017/09/12 Python
Python程序退出方式小结
2017/12/09 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
领导失职检讨书
2014/02/24 职场文书
运动会演讲稿50字
2014/08/25 职场文书
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
Python 实现Mac 屏幕截图详解
2021/10/05 Python