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 相关文章推荐
利用javascript移动div层-javascript 拖动层
Mar 22 Javascript
js给onclick事件赋值,动态传参数实例解说
Mar 28 Javascript
鼠标经过tr时,改变tr当前背景颜色
Jan 13 Javascript
原生js编写2048小游戏
Mar 17 Javascript
layui导航栏实现代码
May 19 Javascript
yarn的使用与升级Node.js的方法详解
Jun 04 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
Vue开发实现吸顶效果的示例代码
Aug 21 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 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
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
JavaScript实现公历转农历功能示例
2017/02/13 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
客服主管岗位职责
2013/12/13 职场文书
大学自我评价
2014/02/12 职场文书
食品销售计划书
2014/04/26 职场文书
医生爱岗敬业演讲稿
2014/08/26 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书