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之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
JS数组的常见用法实例
Feb 10 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
Vue使用NProgress的操作过程解析
Oct 10 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
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
关于js和php对url编码的处理方法
2014/03/04 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
关于php中一些字符串总结
2016/05/05 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
php使用fullcalendar日历插件详解
2019/03/06 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
js 数据类型转换总结笔记
2011/01/17 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
python实现给数组按片赋值的方法
2015/07/28 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
Python数据存储之 h5py详解
2019/12/26 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
电影雷锋观后感
2015/06/10 职场文书
Python实现天气查询软件
2021/06/07 Python
css3应用示例:新增的选择器
2022/03/16 HTML / CSS