云南农职《JavaScript交互式网页设计》 综合机试试卷⑤——简单分类菜单

一、语言和环境

  1. 实现语言：HTML,CSS,JavaScript,JQuery。
  2. 开发环境：HBuilder。

二、题目（100分）：

1、使用Jquery和JavaScript实现二级分类菜单管理

  1. 点击“添加一级分类”能添加一行一级分类
  2. 点击“添加子分类”能添加一行二级分类
  3. 点击“删除”可以删除该级分类，并且删除一级分类的同时，相关二级分类也随之删除。
  4. 点击“全选”可以实现下列行全选，再次点击取消，当其中一个取消后全选复选框不被选中，当全部选中后全选复选框选中。
实现效果

 

2、推荐实现步骤

  1. 在HTML页面中，选择合适的插入方法插入相关节点。 
  2. 使用remove()方法实现分类的删除操作，可通过js方式或者jquery方式获取相关节点并删除。
  3. 提示：复选框的checked的属性值为false时说明未被选中，为true或者checked时状态为选中。
  4. 合理使用选择器，可以简化代码。

三、评分标准

题目：二级分类菜单管理

该程序评分标准如下：

10

正确按照效果图编写出html代码

 

5

正确显示操作界面

 

5

将界面美化，适当添加动画，背景颜色

40

复选框操作

 

10

点击全选复选框，所有复选框被选中，再次点击取消选中状态

 

15

全选状态下，其中一个复选框状态为未被选中时，全选复选框也未被选中

 

15

选中所有复选框，全选复选框被选中

40

正确编写JS/JQuery代码实现分级分类菜单操作

 

10

实现添加一级目录功能

 

5

实现删除一级目录功能（一级目录删除相关二级目录可不删除）

 

10

实现添加二级目录功能

 

5

删除二级目录功能

 

5

删除一级目录，二级目录随之删除

10

整体效果美观以及代码编写规范

 

5

整体显示效果美观

 

5

命名规范，可读性好，编码书写有缩进

总分

100分

四、实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			td,th{
				padding: 10px;
			}
			#content{
				margin: 0 auto;
				width: 800px;
				height: 500px;
			}
		</style>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 添加一级菜单
			function addChild(){
				var th = $("tr:first-child");
				th.after(
				'<tr class="oneMenu">'+
					'<td><input type="checkbox" /> </td>'+
					'<td>一级菜单</td>'+
					'<td><a href="#" onclick="addChilds(this)">添加子分类</a></td>'+
					'<td><a href="#" onclick="delChild(this)">删除</a></td>'+
				'</tr>'
				);
			};
			// 添加二级菜单
			function addChilds(item){
				var th = item.parentNode.parentNode;
				$(th).after(
					'<tr class="twoMenu">'+
						'<td></td>'+
						'<td>二级菜单</td>'+
						'<td></td>'+
						'<td><a href="#" onclick="delChild(this)">删除</a></td>'+
					'</tr>'
				);
			};
			// 删除节点
			function delChild(item){
				var th = item.parentNode.parentNode;
				if (th.className="oneMenu") {
					$(th).remove();
				} else{
					var two = document.className("twoMenu")
					console.log(two)
					$(two).remove();
				}
			}
			// 设置全选
			function allCheck(){
				var all = $("#all");
				var che = $("input[type='checkbox']");
				for (var i = 0;i<che.length;i++) {
					che[i].checked = all[0].checked;
				}
			};

		</script>
	</head>
	<body>
		<div id="content">
			<input type="button" value="添加一级菜单" onclick="addChild()"/>
			<br />
			<table>
				<tr>
					<th><input type="checkbox" id="all" onclick="allCheck()"/>  全选</th>
					<th>分类</th>
					<th>菜单</th>
					<th>操作</th>
				</tr>
				<tr class="oneMenu">
					<td><input type="checkbox" /> </td>
					<td>一级菜单</td>
					<td><a href="#" onclick="addChilds(this)">添加子分类</a></td>
					<td><a href="#" onclick="delChild(this)">删除</a></td>
				</tr>
				<tr class="twoMenu">
					<td></td>
					<td>二级菜单</td>
					<td></td>
					<td><a href="#" onclick="delChild(this)">删除</a></td>
				</tr>
			</table>
		</div>
	</body>
</html>

 

posted @ 2020-11-26 20:06  明金同学  阅读(40)  评论(0)  编辑  收藏  举报