jQuery列表动态增加和删除
<script>
$(function () {
//新增 弹出表单
$(".insert").click(function(){
$(".box").show();
});
//取消 收回表单
$(".cancle").click(function (){
$(".box").hide();
});
//添加颜色
$("tr:odd").css("background-color", "yellow");
///全选事件
$("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>");
}
});
$(".add").click(function (){
//获取表单信息
var num = $(".num").val();
var name = $(".name").val();
var des = $(".des").val();
//用变量接收需要添加到table中的内容
var x = $("<tr><td><input type=\"checkbox\"></td><td>" + num + "</td><td>" + name + "</td><td>" + des + "</td> <td><a href='#' >修改</a><a href='#' > 删除</a></td></tr>");
//将变量x添加到表格中
$(".a").append(x);
//添加颜色
$("tr:odd").css("background-color", "yellow");
});
$("tbody").on("click", "td a:last-child", function () {
if (confirm("是否删除？")) {
//去除执行颜色的样式
$("tr:odd").css("background-color", "");
//删除某一行
$(this).parent().parent().remove();
//重新添加样式
$("tr:odd").css("background-color", "yellow");
}
});
});
</script>