jquery增加和刪除元素的方法
更新時間：2015年01月14日 09:37:12 投稿：shichen2014
這篇文章主要介紹了jquery增加和刪除元素的方法,涉及append、remove等方法的使用技巧,需要的朋友可以參考下
本文實例講述了jquery增加和刪除元素的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>jquery增加刪除元素</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#add").click(function(){//增加一行
$("table").append("<tr>" + $("tr:eq(0)").html() +"</tr>");
});
$("#del").click(function(){//刪除一行
if($("table tr").length > 1){//至少得留一行
$("table tr:last()").remove();
}
});
});
</script>
</head>
<body>
<table>
<tr><td>輸入文字：</td><td><input type="text" /></td></tr>
</table>
<br />
<input type="button" id="add" value="增加一行" /><input type="button" id="del" value="刪除最后一行" />
</body>
</html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>jquery增加刪除元素</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#add").click(function(){//增加一行
$("table").append("<tr>" + $("tr:eq(0)").html() +"</tr>");
});
$("#del").click(function(){//刪除一行
if($("table tr").length > 1){//至少得留一行
$("table tr:last()").remove();
}
});
});
</script>
</head>
<body>
<table>
<tr><td>輸入文字：</td><td><input type="text" /></td></tr>
</table>
<br />
<input type="button" id="add" value="增加一行" /><input type="button" id="del" value="刪除最后一行" />
</body>
</html>
運(yùn)行效果如下：
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
下面小編就為大家?guī)硪黄鞣N選擇框jQuery的選中方法(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
jQuery實現(xiàn)表格的數(shù)據(jù)拖拽
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)表格的數(shù)據(jù)拖拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
本文給大家介紹的nanoScrollerJS是一款使用簡單方式實現(xiàn) Mac OS X Lion 系統(tǒng)滾動條效果的jQuery插件。該滾動條插件利用原生的滾動條可以工作在 iPad、iPhone 和一些 Android Tablets上。2015-04-04
解決jquery有正確返回值但不執(zhí)行success函數(shù)的問題
今天小編就為大家分享一篇解決jquery有正確返回值但不執(zhí)行success函數(shù)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了jQuery中appendTo()方法用法,實例分析了appendTo()方法的功能、定義及把匹配的元素插入指定元素結(jié)尾的使用技巧,需要的朋友可以參考下2015-01-01
本文主要介紹了字太多用...代替的兩種方法。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
domManip函數(shù)可以說是jquery中一個元老級工具函數(shù)了，domManip 的主要功能是為了實現(xiàn) DOM 的插入和替換。接下來通過本文給大家談?wù)刯Query3.0的domManip函數(shù)的理解，非常不錯，感興趣的朋友一起看看吧2016-09-09
jQuery leonaScroll 1.1 自定義滾動條插件(推薦)
這篇文章主要介紹了jQuery leonaScroll 1.1 自定義滾動條插件(推薦)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
本文給大家匯總介紹了10個非常實用，也非常簡單的jquery特效，基本上項目中都可以用到，推薦給大家，有需要的小伙伴可以參考下。2015-10-10
jQuery實現(xiàn)數(shù)字自動增加或者減少的動畫效果示例
這篇文章主要介紹了jQuery實現(xiàn)數(shù)字自動增加或者減少的動畫效果,涉及jQuery結(jié)合時間函數(shù)動態(tài)設(shè)置元素屬性相關(guān)操作技巧,需要的朋友可以參考下2018-12-12