jQuery列表动态增加和删除的实现方法
通过jQuery实现列表的数据动态添加与删除
代码演示
演示地址
背景隔行换色
CSS代码
/*设置奇数行颜色*/
.even{
background-color:dodgerblue;
}
/*设置偶数行背景颜色*/
.odd{
background-color:pink;
}
JavaScript代码
//设置奇数偶数行的背景颜色
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
全选和取消全选事件
//设置全选和取消全选事件
$("theadth:first").append("")
$("theadinput:checkbox").click(function(){
if($(this).prop("checked")){
$("tbodyinput:checkbox").prop("checked",true);
$("#show").replaceWith("已全选");
}else{
$("tbodyinput:checkbox").prop("checked",false);
$("#show").replaceWith("已取消全选");
}
});
删除
//给当前和未来元素添加绑定事件
$("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代码
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("\n"+
"修改 删除 ");
//获取文本框节点
vartextDom=$("div:nth-child(2):text");
//获取td节点
vartdDom=$("div:nth-child(1)tr:lasttd");
for(vari=0;i
完整代码
HTML代码
序号
分类名
分类描述
操作
1
1
1
修改 删除
2
2
2
修改 删除
3
3
3
修改 删除
4
4
4
修改 删除
CSS代码
table,th,td{
border:1pxsolidblack;
}
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代码
总结
到此这篇关于jQuery列表动态增加和删除实现方法的文章就介绍到这了,更多相关jQuery列表动态增加和删除内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！