快捷導(dǎo)航

jQuery實(shí)現(xiàn)html表格動(dòng)態(tài)添加新行的方法

更新時(shí)間：2015年05月28日 15:18:40 作者：不吃皮蛋

這篇文章主要介紹了jQuery實(shí)現(xiàn)html表格動(dòng)態(tài)添加新行的方法,涉及jQuery鼠標(biāo)事件及頁(yè)面元素的操作技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)html表格動(dòng)態(tài)添加新行的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<!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>

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Jquery中find與each方法用法實(shí)例
這篇文章主要介紹了Jquery中find與each方法用法,實(shí)例分析了find與each方法的功能、定義與使用技巧,需要的朋友可以參考下
2015-02-02
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI實(shí)現(xiàn)樹形網(wǎng)絡(luò)基本操作(2)
這篇文章主要幫助大家輕松學(xué)習(xí)jQuery插件EasyUI，針對(duì)EasyUI實(shí)現(xiàn)樹形網(wǎng)絡(luò)基本操作，分為三大方面：動(dòng)態(tài)加載、添加分頁(yè)、以及惰性加載節(jié)點(diǎn)，感興趣的小伙伴們可以參考一下
2015-11-11
jQuery源碼解讀之hasClass()方法分析
這篇文章主要介紹了jQuery源碼解讀之hasClass()方法,以注釋形式較為詳細(xì)的分析了hasClass()方法的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
jquery實(shí)現(xiàn)最簡(jiǎn)單的滑動(dòng)菜單效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)最簡(jiǎn)單的滑動(dòng)菜單效果代碼,涉及jQuery基于鼠標(biāo)事件操作頁(yè)面元素動(dòng)態(tài)變換的基本技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
基于jquery實(shí)現(xiàn)ajax無(wú)刷新評(píng)論
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)ajax無(wú)刷新評(píng)論的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考
2016-05-05
jQuery實(shí)現(xiàn)圖片信息的浮動(dòng)顯示實(shí)例代碼
圖片信息的浮動(dòng)顯示的效果，在網(wǎng)頁(yè)應(yīng)用中還是比較流行的，下面為大家詳細(xì)介紹下使用jquery是如何實(shí)現(xiàn)的，喜歡的朋友可以參考下
2013-08-08
快速掌握jQuery插件開發(fā)
本文的目的是可以快速了解jQuery插件的開發(fā)原理以及掌握jQuery開發(fā)的基本技能。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
jQuery+css實(shí)現(xiàn)百度百科的頁(yè)面導(dǎo)航效果
這篇文章主要介紹了jQuery+css實(shí)現(xiàn)百度百科的頁(yè)面導(dǎo)航效果,需要的朋友可以參考下
2014-12-12
jQuery實(shí)現(xiàn)的fixedMenu下拉菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的fixedMenu下拉菜單效果代碼,通過(guò)自定義fixedMenu方法實(shí)現(xiàn)點(diǎn)擊下拉菜單效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
jQuery實(shí)現(xiàn)Select左右復(fù)制移動(dòng)內(nèi)容
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)Select左右復(fù)制移動(dòng)內(nèi)容的實(shí)現(xiàn)方法，代碼非常簡(jiǎn)單，具有參考借鑒價(jià)值，需要的朋友參考下
2016-08-08