编程 Javascript

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程序设计有所帮助。

- Author -

不吃皮蛋

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery Select(单选) 模拟插件 V1.3.62 改进版

Jul 17 Javascript

JavaScript 命名空间使用介绍

Aug 29 Javascript

PHP开发者必须掌握的6个关键字

Apr 14 Javascript

JQuery插件ajaxfileupload.js异步上传文件实例

May 19 Javascript

原生JavaScript制作微博发布面板效果

Mar 11 Javascript

JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法

Apr 18 Javascript

vue父组件点击触发子组件事件的实例讲解

Feb 08 Javascript

Angularjs之ngModel中的值验证绑定方法

Sep 13 Javascript

使用vue2实现带地区编号和名称的省市县三级联动效果

Nov 05 Javascript

JS中的模糊查询功能

Dec 08 Javascript

原生javascript实现类似vue的数据绑定功能示例【观察者模式】

Feb 24 Javascript

解决Vue 移动端点击出现300毫秒延迟的问题

Jul 21 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