隔行换色
CSS代码
.odd {
background-color: rosybrown;
}
jQuery代码
$("tr:odd").addClass("odd");
全选/取消全选
$("tr th:first").append("<span id='showStr'></span>");
$("th input:checkbox").click(function() {
if($(this).prop("checked")) {
$("td input:checkbox").prop("checked", true);
$("#showStr").replaceWith("<span id='showStr'>已经全选</span>");
} else {
$("td input:checkbox").prop("checked", false);
$("#showStr").replaceWith("<span id='showStr'>已经取消</span>");
}
});
删除
$("tr td a:nth-child(1)").click(function() {
if(confirm("是否删除?")) {
$("tr:odd").removeClass("odd");
$(this).parents("tr").remove();
$("tr:odd").addClass("odd");
}
});
新增
CSS代码
//默认隐藏新增界面
#hide {
display: none;
background-color: lightcyan;
width: 614px;
margin: 0 auto;
}
HTML代码
<form id="hide">
<div>
分类的ID<input type="text" class="id" /><br />
分类的名称<input type="text" class="name" /><br />
分类的描述<input type="text" class="describe" /><br />
<input type="button" value="提交" id="submit" />
<input type="button" value="取消" id="cancel" /><br />
</div>
</form>
jQuery代码
$("#fun").click(function() {
$("#hide").slideDown(700);
});
$("#submit").click(function() {
var id = $(".id").val();
var name = $(".name").val();
var describe = $(".describe").val();
if(id == "" || name == "" || describe == "") {
alert("请输入所有值");
return;
}
$("tr:odd").removeClass("odd");
var copyDom = $("table tr:eq(2)").clone(true);
$("table").append(copyDom);
var trDom = $("tr:last td");
trDom.eq(1).text(id);
trDom.eq(2).text(name);
trDom.eq(3).text(describe);
$("tr:odd").addClass("odd");
});
$("#cancel").click(function() {
$("#hide").slideUp(700);
});
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.3.1.js"></script>
<style>
.odd {
background-color: rosybrown;
}
a {
text-decoration: none;
}
th,
td {
width: 120px;
height: 35px;
text-align: center;
}
table {
margin: 0 auto;
}
div {
text-align: center;
}
#hide {
display: none;
background-color: lightcyan;
width: 614px;
margin: 0 auto;
}
</style>
<script>
$(function() {
$("tr:odd").addClass("odd");
$("tr th:first").append("<span id='showStr'></span>");
$("th input:checkbox").click(function() {
if($(this).prop("checked")) {
$("td input:checkbox").prop("checked", true);
$("#showStr").replaceWith("<span id='showStr'>已经全选</span>");
} else {
$("td input:checkbox").prop("checked", false);
$("#showStr").replaceWith("<span id='showStr'>已经取消</span>");
}
});
$("tr td a:nth-child(1)").click(function() {
if(confirm("是否删除?")) {
$("tr:odd").removeClass("odd");
$(this).parents("tr").remove();
$("tr:odd").addClass("odd");
}
});
$("#fun").click(function() {
$("#hide").slideDown(700);
});
$("#submit").click(function() {
var id = $(".id").val();
var name = $(".name").val();
var describe = $(".describe").val();
if(id == "" || name == "" || describe == "") {
alert("请输入所有值");
return;
}
$("tr:odd").removeClass("odd");
var copyDom = $("table tr:eq(2)").clone(true);
$("table").append(copyDom);
var trDom = $("tr:last td");
trDom.eq(1).text(id);
trDom.eq(2).text(name);
trDom.eq(3).text(describe);
$("tr:odd").addClass("odd");
});
$("#cancel").click(function() {
$("#hide").slideUp(700);
});
});
</script>
</head>
<body>
<div><input type="button" value="新增" id="fun" /></div>
<form>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th><input type="checkbox" /></th>
<th>分类的ID</th>
<th>分类的名称</th>
<th>分类的描述</th>
<th>操作</th>
</tr>
<tr id="retain">
<td><input type="checkbox" /></td>
<td>1</td>
<td>第一行</td>
<td>第一行</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>第二行</td>
<td>第二行</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>第三行</td>
<td>第三行</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
<td>第四行</td>
<td>第四行</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>5</td>
<td>第五行</td>
<td>第五行</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
</table>
</form>
<form id="hide">
<div>
分类的ID:<input type="text" class="id" /><br />
分类的名称:<input type="text" class="name" /><br />
分类的描述:<input type="text" class="describe" /><br />
<input type="button" value="提交" id="submit" />
<input type="button" value="取消" id="cancel" /><br />
</div>
</form>
</body>
</html>
页面效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ddacfec9b41a7f607b60ac432f85b4c7.png#pic_center)