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 相关文章推荐
QUnit jQuery的TDD框架
Nov 04 Javascript
js比较和逻辑运算符的介绍
Mar 10 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
Jun 10 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
Ajax请求时无法重定向的问题解决代码详解
Jun 21 Javascript
OpenLayers实现图层切换控件
Sep 25 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 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
Javascript的一种模块模式
2008/03/22 Javascript
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
python使用range函数计算一组数和的方法
2015/05/07 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
Python 面试中 8 个必考问题
2018/11/16 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
python实现从wind导入数据
2019/12/03 Python
python 操作hive pyhs2方式
2019/12/21 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
超市营业员岗位职责
2013/12/20 职场文书
工作决心书
2014/03/11 职场文书
倡议书的写法
2014/08/30 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript