基于jquery的實現(xiàn)簡單的表格中增加或刪除下一行
更新時間：2010年08月01日 10:47:49 作者：
下面的代碼利用jquery簡單的實現(xià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
復制代碼 代碼如下:
<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>
您可能感興趣的文章:
- jQuery動態(tài)操作表單示例【基于table表格】
- jQuery+Datatables實現(xiàn)表格批量刪除功能【推薦】
- jQuery實現(xiàn)表格行和列的動態(tài)添加與刪除方法【測試可用】
- jQuery對table表格進行增刪改查
- 基于jQuery的動態(tài)增刪改查表格信息，可左鍵/右鍵提示（原創(chuàng)自Zjmainstay）
- jquery動態(tài)增加刪除表格行的小例子
- 基于jQuery實現(xiàn)表格的查看修改刪除
- JQuery動態(tài)添加和刪除表格行的方法
- 原生JS和JQuery動態(tài)添加、刪除表格行的方法
- jquery動態(tài)增加刪減表格行特效
- jQuery實現(xiàn)表格的增、刪、改操作示例
相關文章
這篇文章主要介紹了jquery 設置style:display的方法,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jquery實現(xiàn)鼠標滑過小圖時顯示大圖的方法,涉及圖片及鼠標操作的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細介紹了JQuery日期插件datepicker的使用方法，感興趣的小伙伴們可以參考一下2016-03-03
JQuery使用數(shù)組遍歷跳出each循環(huán)
這篇文章主要介紹了JQuery使用數(shù)組遍歷跳出each循環(huán),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-09-09 
日期時間范圍選擇插件:daterangepicker使用總結(必看篇)
下面小編就為大家?guī)硪黄掌跁r間范圍選擇插件:daterangepicker使用總結(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09 
這篇文章主要介紹了jQuery實現(xiàn)列表的增加和刪除功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧
2018-06-06 
這篇文章主要介紹了jQuery中triggerHandler()方法用法,實例分析了triggerHandler()方法的功能、定義及觸發(fā)被選元素的指定事件類型的使用技巧,需要的朋友可以參考下
2015-01-01 
如何想讓頁面上兩個div中的滾動條(滑塊)同步運動該怎實現(xiàn)，具體代碼如下，感興趣的朋友可以參考下
2013-08-08 
本篇文章主要介紹了js/jq仿window文件夾移動/剪切/復制等操作代碼，非常具有實用價值，需要的朋友可以參考下。
2017-03-03