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 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
node.js中使用node-schedule实现定时任务实例
Jun 03 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
Apr 30 Javascript
Vue中keep-alive的两种应用方式
Jul 15 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 Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
php删除数组元素示例分享
2014/02/17 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
npm的lock机制解析
2019/06/20 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
对python 命令的-u参数详解
2018/12/03 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
材料成型专业个人求职信范文
2013/09/25 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
贷款承诺书范文
2014/05/19 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
门面房租房协议书
2014/12/01 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python