jQuery列表动态增加和删除的实现方法
#代码知识 发布时间： 2026-01-12
通过jQuery实现列表的数据动态添加与删除
代码演示
演示地址
背景隔行换色
CSS代码
/* 设置奇数行颜色 */
.even {
background-color: dodgerblue;
}
/* 设置偶数行背景颜色 */
.odd {
background-color: pink;
}
JavaScript代码
// 设置奇数偶数行的背景颜色
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
全选和取消全选事件
//设置全选和取消全选事件
$("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>");
// 获取文本框节点
var textDom = $("div:nth-child(2) :text");
// 获取td节点
var tdDom = $("div:nth-child(1) tr:last td");
for (var i = 0; i < textDom.length; i++) {
//获取文本框内容
var content = textDom.eq(i).val();
// 把文本框获取的内容写入到td内
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;
}
/* 设置奇数行颜色 */
.even {
background-color: dodgerblue;
}
/* 设置偶数行背景颜色 */
.odd {
background-color: pink;
}
/* 默认隐藏新增页面*/
div:nth-child(2) {
display: none;
}
JavaScript代码
<script>
$(function () {
// 设置奇数偶数行的背景颜色
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
//设置全选和取消全选事件
$("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>");
// 获取文本框节点
var textDom = $("div:nth-child(2) :text");
// 获取td节点
var tdDom = $("div:nth-child(1) tr:last td");
for (var i = 0; i < textDom.length; i++) {
//获取文本框内容
var content = textDom.eq(i).val();
// 把文本框获取的内容写入到td内
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>
总结
代码知识SEO上一篇 : 详解ASP.NET Core Web Api之JWT刷新Token
下一篇 : java 如何读取properties文件
-
SEO外包最佳选择国内专业的白帽SEO机构，熟知搜索算法，各行业企业站优化策略！
SEO公司
-
可定制SEO优化套餐基于整站优化与品牌搜索展现，定制个性化营销推广方案！
SEO套餐
-
SEO入门教程多年积累SEO实战案例，从新手到专家，从入门到精通，海量的SEO学习资料！
SEO教程
-
SEO项目资源高质量SEO项目资源，稀缺性外链，优质文案代写，老域名提权，云主机相关配置折扣！
SEO资源
-
SEO快速建站快速搭建符合搜索引擎友好的企业网站，协助备案，域名选择，服务器配置等相关服务！
SEO建站
-
快速搜索引擎优化建议没有任何SEO机构，可以承诺搜索引擎排名的具体位置，如果有，那么请您多注意！专业的SEO机构，一般情况下只能确保目标关键词进入到首页或者前几页，如果您有相关问题，欢迎咨询！
