jQuery列表動態(tài)增加和刪除的實現(xiàn)方法
更新時間：2020年11月05日 10:33:13 作者：jiangrunkang.
這篇文章主要給大家介紹了關(guān)于jQuery列表動態(tài)增加和刪除的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
通過jQuery實現(xiàn)列表的數(shù)據(jù)動態(tài)添加與刪除
代碼演示
演示地址
背景隔行換色
CSS代碼
/* 設(shè)置奇數(shù)行顏色 */
.even {
background-color: dodgerblue;
}
/* 設(shè)置偶數(shù)行背景顏色 */
.odd {
background-color: pink;
}
JavaScript代碼
// 設(shè)置奇數(shù)偶數(shù)行的背景顏色
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
全選和取消全選事件
//設(shè)置全選和取消全選事件
$("thead th:first").append("<span id='show'></span>")
$("thead input:checkbox").click(function () {
if ($(this).prop("checked")) {
$("tbody input:checkbox").prop("checked", true);
$("#show").replaceWith("<span id='show'>已全選</span>");
} else {
$("tbody input:checkbox").prop("checked", false);
$("#show").replaceWith("<span id='show'>已取消全選</span>");
}
});
刪除
//給當前和未來元素添加綁定事件
$("tbody").on("click", "td>a:nth-child(2)", function () {
if (confirm("確定要刪除嗎?")) {
//取消背景顏色
$("tr:even").removeClass("even");
$("tr:odd").removeClass("odd");
//移除tr
$(this).parent().parent().remove()
//添加背景顏色
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
}
});
新增
HTML代碼
<!--新增列表--> <div> <form> <table> <tr> <td>序號</td> <td><input type="text"/></td> </tr> <tr> <td>分類名</td> <td><input type="text"/></td> </tr> <tr> <td>分類描述</td> <td><input type="text"/></td> </tr> <input type="reset" value="確定"/> <input type="reset" value="取消"/> </table> </form> </div>
CSS代碼
/*默認隱藏新增頁面*/
div:nth-child(2) {
display: none;
}
JavaScript代碼
// 點擊"新增"按鈕顯示新增列表
$("div:nth-child(1)>input:button").click(function () {
$("div:nth-child(2)").show("slow");
});
//點擊"取消"按鈕隱藏div
$("div:nth-child(2) :reset:last").click(function () {
$("div:nth-child(2)").hide("slow");
});
//點擊"確定"按鈕,提交表單
$("div:nth-child(2) :reset:first-child").click(function () {
$("div:nth-child(1) tbody").append(" <tr>\n" +
" <td><input type=\"checkbox\"/></td>\n" +
" <td></td>\n" +
" <td></td>\n" +
" <td></td>\n" +
" <td><a href=\"#\">修改</a> <a href=\"#\">刪除</a></td>\n" +
" </tr>");
// 獲取文本框節(jié)點
var textDom = $("div:nth-child(2) :text");
// 獲取td節(jié)點
var tdDom = $("div:nth-child(1) tr:last td");
for (var i = 0; i < textDom.length; i++) {
//獲取文本框內(nèi)容
var content = textDom.eq(i).val();
// 把文本框獲取的內(nèi)容寫入到td內(nèi)
tdDom.eq(i + 1).text(content);
}
//添加背景顏色
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
$("div:nth-child(2)").hide("slow");
});
完整代碼
HTML代碼
<body> <div> <input type="button" value="新增"/> <table cellpadding="0px" cellspacing="0px"> <thead> <tr> <th><input type="checkbox"/></th> <th>序號</th> <th>分類名</th> <th>分類描述</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"/></td> <td>1</td> <td>1</td> <td>1</td> <td><a href="#">修改</a> <a href="#">刪除</a></td> </tr> <tr> <td><input type="checkbox"/></td> <td>2</td> <td>2</td> <td>2</td> <td><a href="#">修改</a> <a href="#">刪除</a></td> </tr> <tr> <td><input type="checkbox"/></td> <td>3</td> <td>3</td> <td>3</td> <td><a href="#">修改</a> <a href="#">刪除</a></td> </tr> <tr> <td><input type="checkbox"/></td> <td>4</td> <td>4</td> <td>4</td> <td><a href="#">修改</a> <a href="#">刪除</a></td> </tr> </tbody> </table> </div> <!--新增列表--> <div> <form> <table> <tr> <td>序號</td> <td><input type="text"/></td> </tr> <tr> <td>分類名</td> <td><input type="text"/></td> </tr> <tr> <td>分類描述</td> <td><input type="text"/></td> </tr> <input type="reset" value="確定"/> <input type="reset" value="取消"/> </table> </form> </div> </body>
CSS代碼
table, th, td {
border: 1px solid black;
}
th, td {
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
}
/* 設(shè)置奇數(shù)行顏色 */
.even {
background-color: dodgerblue;
}
/* 設(shè)置偶數(shù)行背景顏色 */
.odd {
background-color: pink;
}
/* 默認隱藏新增頁面*/
div:nth-child(2) {
display: none;
}
JavaScript代碼
<script>
$(function () {
// 設(shè)置奇數(shù)偶數(shù)行的背景顏色
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
//設(shè)置全選和取消全選事件
$("thead th:first").append("<span id='show'></span>")
$("thead input:checkbox").click(function () {
if ($(this).prop("checked")) {
$("tbody input:checkbox").prop("checked", true);
$("#show").replaceWith("<span id='show'>已全選</span>");
} else {
$("tbody input:checkbox").prop("checked", false);
$("#show").replaceWith("<span id='show'>已取消全選</span>");
}
});
//新增商品
$("div:nth-child(1)>input:button").click(function () {
$("div:nth-child(2)").show("slow");
});
//"取消" 按鈕
$("div:nth-child(2) :reset:last").click(function () {
$("div:nth-child(2)").hide("slow");
});
//"確定" 按鈕
$("div:nth-child(2) :reset:first-child").click(function () {
$("div:nth-child(1) tbody").append(" <tr>\n" +
" <td><input type=\"checkbox\"/></td>\n" +
" <td></td>\n" +
" <td></td>\n" +
" <td></td>\n" +
" <td><a href=\"#\">修改</a> <a href=\"#\">刪除</a></td>\n" +
" </tr>");
// 獲取文本框節(jié)點
var textDom = $("div:nth-child(2) :text");
// 獲取td節(jié)點
var tdDom = $("div:nth-child(1) tr:last td");
for (var i = 0; i < textDom.length; i++) {
//獲取文本框內(nèi)容
var content = textDom.eq(i).val();
// 把文本框獲取的內(nèi)容寫入到td內(nèi)
tdDom.eq(i + 1).text(content);
}
//添加背景顏色
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
$("div:nth-child(2)").hide("slow");
});
//給當前和未來元素添加綁定事件
$("tbody").on("click", "td>a:nth-child(2)", function () {
if (confirm("確定要刪除嗎?")) {
//取消背景顏色
$("tr:even").removeClass("even");
$("tr:odd").removeClass("odd");
//移除tr
$(this).parent().parent().remove()
//添加背景顏色
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
}
});
});
</script>
總結(jié)
到此這篇關(guān)于jQuery列表動態(tài)增加和刪除實現(xiàn)方法的文章就介紹到這了,更多相關(guān)jQuery列表動態(tài)增加和刪除內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- jQuery實現(xiàn)動態(tài)顯示select下拉列表數(shù)據(jù)的方法
- jQuery實現(xiàn)動態(tài)加載select下拉列表項功能示例
- jQuery實現(xiàn)列表內(nèi)容的動態(tài)載入特效
- 基于jQuery和Bootstrap框架實現(xiàn)仿知乎前端動態(tài)列表效果
- jQuery動態(tài)產(chǎn)生select option下拉列表
- jQuery簡單實現(xiàn)向列表動態(tài)添加新元素的方法示例
- jQuery實現(xiàn)動態(tài)生成年月日級聯(lián)下拉列表示例
- 如何使用Jquery動態(tài)生成二級選項列表
相關(guān)文章
這篇文章主要介紹了JQuery的attr 與 val區(qū)別的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
jquery動態(tài)添加option選項，還有動態(tài)刪除的方法，大家參考使用吧2013-12-12
jquery實現(xiàn)的回旋滾動效果完整實例【附demo源碼下載】
這篇文章主要介紹了jquery實現(xiàn)的回旋滾動效果,可實現(xiàn)點擊后側(cè)圖片呈現(xiàn)立體翻轉(zhuǎn)切換的功能,涉及jQuery插件roundabout.js的使用,并附帶了完整實例demo源碼供讀者下載參考,需要的朋友可以參考下2016-09-09
用JQuery 實現(xiàn)的自定義對話框...2007-03-03
這里給大家推薦9款炫酷的基于jquery的頁面特效，都是本站比較熱門的效果，這里整理出來分享給大家，也方便小伙伴們對比查看2014-12-12
分享2個jQuery插件--jquery.fileupload與artdialog
這篇文章主要介紹了分享2個jQuery插件--jquery.fileupload與artdialog的使用方法及示例，非常的實用，這里推薦給大家。2014-12-12
jquery json 實例代碼，需要的朋友可以參考下。2010-12-12
下面是個應用的小例子用來統(tǒng)一處理ajax請求中利用完全透明遮罩層組織用戶和界面元素交換，當ajax出錯時提示用戶2010-08-08
jQuery+css實現(xiàn)炫目的動態(tài)塊漂移效果
這篇文章主要介紹了jQuery+css實現(xiàn)的動態(tài)塊漂移效果,涉及jQuery基于隨機數(shù)與時間函數(shù)動態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01
jQuery.ajax 跨域請求webapi設(shè)置headers的解決方案
需要通過服務器端設(shè)置響應頭、正確響應options請求，正確設(shè)置 JavaScript端需要設(shè)置的headers信息方能實現(xiàn)，本文介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下2016-08-08