基于jquery的實(shí)現(xiàn)簡(jiǎn)單的表格中增加或刪除下一行
更新時(shí)間：2010年08月01日 10:47:49 作者：
下面的代碼利用jquery簡(jiǎn)單的實(shí)現(xiàn)表格中增加和刪除一行，很簡(jiǎn)單。
代碼如下：
html
<div>
<table>
<tr><td>1111</td><td><input type="button" value="添加下一行" /><input type="button" value="刪除下一行" /></td></tr>
<tr><td>2222</td><td><input type="button" value="添加下一行" /><input type="button" value="刪除下一行" /></td></tr>
<tr><td>4444</td><td><input type="button" value="添加下一行" /><input type="button" value="刪除下一行" /></td></tr>
</table>
</div>
jquery代碼:
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
ModifyClick();
});
function ModifyClick() {
$("table tr input[type='button'] ").each(function () {
$(this).unbind("click");
$(this).bind("click", function () {
if ($(this).val() == "添加下一行") {
$(this).parent().parent().after("<tr><td>Add</td><td><input onclick=\"ModifyClick()\" type=button value=\"添加下一行\(zhòng)" /><input onclick=\"ModifyClick()\" type=button value=\"刪除下一行\(zhòng)" /></td></tr>");
}
if ($(this).val() == "刪除下一行") {
$(this).parent().parent().next().eq(0).remove();
}
});
});
}
</script>
html
復(fù)制代碼 代碼如下:
<div>
<table>
<tr><td>1111</td><td><input type="button" value="添加下一行" /><input type="button" value="刪除下一行" /></td></tr>
<tr><td>2222</td><td><input type="button" value="添加下一行" /><input type="button" value="刪除下一行" /></td></tr>
<tr><td>4444</td><td><input type="button" value="添加下一行" /><input type="button" value="刪除下一行" /></td></tr>
</table>
</div>
jquery代碼:
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
ModifyClick();
});
function ModifyClick() {
$("table tr input[type='button'] ").each(function () {
$(this).unbind("click");
$(this).bind("click", function () {
if ($(this).val() == "添加下一行") {
$(this).parent().parent().after("<tr><td>Add</td><td><input onclick=\"ModifyClick()\" type=button value=\"添加下一行\(zhòng)" /><input onclick=\"ModifyClick()\" type=button value=\"刪除下一行\(zhòng)" /></td></tr>");
}
if ($(this).val() == "刪除下一行") {
$(this).parent().parent().next().eq(0).remove();
}
});
});
}
</script>
您可能感興趣的文章:
- jQuery動(dòng)態(tài)操作表單示例【基于table表格】
- jQuery+Datatables實(shí)現(xiàn)表格批量刪除功能【推薦】
- jQuery實(shí)現(xiàn)表格行和列的動(dòng)態(tài)添加與刪除方法【測(cè)試可用】
- jQuery對(duì)table表格進(jìn)行增刪改查
- 基于jQuery的動(dòng)態(tài)增刪改查表格信息，可左鍵/右鍵提示（原創(chuàng)自Zjmainstay）
- jquery動(dòng)態(tài)增加刪除表格行的小例子
- 基于jQuery實(shí)現(xiàn)表格的查看修改刪除
- JQuery動(dòng)態(tài)添加和刪除表格行的方法
- 原生JS和JQuery動(dòng)態(tài)添加、刪除表格行的方法
- jquery動(dòng)態(tài)增加刪減表格行特效
- jQuery實(shí)現(xiàn)表格的增、刪、改操作示例
相關(guān)文章
jquery 設(shè)置style:display的方法
這篇文章主要介紹了jquery 設(shè)置style:display的方法,需要的朋友可以參考下2015-01-01
jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)小圖時(shí)顯示大圖的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)小圖時(shí)顯示大圖的方法,涉及圖片及鼠標(biāo)操作的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細(xì)介紹了JQuery日期插件datepicker的使用方法，感興趣的小伙伴們可以參考一下2016-03-03
JQuery使用數(shù)組遍歷跳出each循環(huán)
這篇文章主要介紹了JQuery使用數(shù)組遍歷跳出each循環(huán),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-09-09 
日期時(shí)間范圍選擇插件:daterangepicker使用總結(jié)(必看篇)
下面小編就為大家?guī)?lái)一篇日期時(shí)間范圍選擇插件:daterangepicker使用總結(jié)(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09 
這篇文章主要介紹了jQuery實(shí)現(xiàn)列表的增加和刪除功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-06-06 
jQuery中triggerHandler()方法用法實(shí)例
這篇文章主要介紹了jQuery中triggerHandler()方法用法,實(shí)例分析了triggerHandler()方法的功能、定義及觸發(fā)被選元素的指定事件類(lèi)型的使用技巧,需要的朋友可以參考下
2015-01-01 
讓頁(yè)面上兩個(gè)div中的滾動(dòng)條(滑塊)同步運(yùn)動(dòng)示例
如何想讓頁(yè)面上兩個(gè)div中的滾動(dòng)條(滑塊)同步運(yùn)動(dòng)該怎實(shí)現(xiàn)，具體代碼如下，感興趣的朋友可以參考下
2013-08-08 
js/jq仿window文件夾移動(dòng)/剪切/復(fù)制等操作代碼
本篇文章主要介紹了js/jq仿window文件夾移動(dòng)/剪切/復(fù)制等操作代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。
2017-03-03