基于jquery的實(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>
- 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 easyui datagird編輯行刪除行功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery easyui datagird編輯行刪除行功能的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-09-09Jquery1.9.1源碼分析系列(十五)動(dòng)畫(huà)處理之外篇
這篇文章主要介紹了Jquery1.9.1源碼分析系列(十五)動(dòng)畫(huà)處理之外篇 的相關(guān)資料,需要的朋友可以參考下2015-12-12jQuery移動(dòng)web開(kāi)發(fā)之頁(yè)面跳轉(zhuǎn)和加載外部頁(yè)面的實(shí)現(xiàn)
這篇文章主要介紹了jQuery移動(dòng)web開(kāi)發(fā)之頁(yè)面跳轉(zhuǎn)和加載外部頁(yè)面的實(shí)現(xiàn),以changePage()和loadPage()方法的使用為主,需要的朋友可以參考下2015-12-12基于jQuery Ajax實(shí)現(xiàn)下拉框無(wú)刷新聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了基于jQuery Ajax實(shí)現(xiàn)下拉框無(wú)刷新聯(lián)動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12jquery實(shí)現(xiàn)漂亮的二級(jí)下拉菜單代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)漂亮的二級(jí)下拉菜單代碼,涉及jquery鼠標(biāo)click事件控制頁(yè)面class屬性動(dòng)態(tài)變換效果的切換技巧,非常美觀實(shí)用,需要的朋友可以參考下2015-08-08jQuery插件HighCharts繪制2D柱狀圖、折線圖的組合雙軸圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件HighCharts繪制2D柱狀圖、折線圖的組合雙軸圖效果,結(jié)合實(shí)例形式分析了jQuery使用HighCharts插件同時(shí)繪制柱狀圖、折線圖的組合雙軸圖實(shí)現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03從零開(kāi)始學(xué)習(xí)jQuery (五) jquery事件與事件對(duì)象
事件是腳本編程的靈魂. 所以本章內(nèi)容也是jQuery學(xué)習(xí)的重點(diǎn). 本文將對(duì)jQuery中的事件處理以及事件對(duì)象進(jìn)行詳細(xì)的講解.2011-02-02jquery動(dòng)態(tài)調(diào)整div大小使其寬度始終為瀏覽器寬度
需要設(shè)置寬度為整個(gè)瀏覽器寬度的div,當(dāng)然我們可以使用相對(duì)布局的方式做到這一點(diǎn),下面是具體實(shí)現(xiàn),大家可以參考下2014-06-06jQuery中Ajax全局事件引用方式及各個(gè)事件(全局/局部)執(zhí)行順序
這篇文章主要介紹了jQuery中Ajax全局事件引用方式及各個(gè)事件(全局/局部)執(zhí)行順序的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-06-06