通过jQuery实现列表的数据动态添加与删除 代码演示 演示地址 背景隔行换色 CSS代码 /* 设置奇数行颜色 */.even { background-color: dodgerblue;}/* 设置偶数行背景颜色 */.odd { background-color: pink;}
通过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>
总结
到此这篇关于jQuery列表动态增加和删除实现方法的文章就介绍到这了,更多相关jQuery列表动态增加和删除内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！