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

冷不防 2022-12-24 00:44 20阅读 0赞

## **一、语言和环境** ##

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

## **二、题目（100分）：** ##

**1、使用J****q****uery和JavaScript实现二级分类菜单管理**

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70][] 实现效果

**2、推荐实现步骤**

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

## **三、评分标准** ##

<table style="width:371.4pt;"> 
 <tbody> 
 <tr> 
 <td colspan="4" style="width:371.4pt;"> 题目：二级分类菜单管理 </td> 
 </tr> 
 <tr> 
 <td colspan="4" style="width:371.4pt;"> 该程序评分标准如下： </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> 10 </td> 
 <td colspan="3" style="width:346.1pt;"> 正确按照效果图编写出html代码 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> &nbsp; </td> 
 <td colspan="2" style="width:44pt;"> 5 </td> 
 <td style="width:302.1pt;"> 正确显示操作界面 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> &nbsp; </td> 
 <td colspan="2" style="width:44pt;"> 5 </td> 
 <td style="width:302.1pt;"> 将界面美化，适当添加动画，背景颜色 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> 40 </td> 
 <td colspan="3" style="width:346.1pt;"> 复选框操作 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> &nbsp; </td> 
 <td colspan="2" style="width:44pt;"> 10 </td> 
 <td style="width:302.1pt;"> 点击全选复选框，所有复选框被选中，再次点击取消选中状态 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> &nbsp; </td> 
 <td colspan="2" style="width:44pt;"> 15 </td> 
 <td style="width:302.1pt;"> 全选状态下，其中一个复选框状态为未被选中时，全选复选框也未被选中 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> &nbsp; </td> 
 <td colspan="2" style="width:44pt;"> 15 </td> 
 <td style="width:302.1pt;"> 选中所有复选框，全选复选框被选中 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> 40 </td> 
 <td colspan="3" style="width:346.1pt;"> 正确编写JS/JQuery代码实现分级分类菜单操作 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> &nbsp; </td> 
 <td colspan="2" style="width:44pt;"> 10 </td> 
 <td style="width:302.1pt;"> 实现添加一级目录功能 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> &nbsp; </td> 
 <td colspan="2" style="width:44pt;"> 5 </td> 
 <td style="width:302.1pt;"> 实现删除一级目录功能（一级目录删除相关二级目录可不删除） </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> &nbsp; </td> 
 <td colspan="2" style="width:44pt;"> 10 </td> 
 <td style="width:302.1pt;"> 实现添加二级目录功能 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> &nbsp; </td> 
 <td colspan="2" style="width:44pt;"> 5 </td> 
 <td style="width:302.1pt;"> 删除二级目录功能 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> &nbsp; </td> 
 <td colspan="2" style="width:44pt;"> 5 </td> 
 <td style="width:302.1pt;"> 删除一级目录，二级目录随之删除 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> 10 </td> 
 <td colspan="3" style="width:346.1pt;"> 整体效果美观以及代码编写规范 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> &nbsp; </td> 
 <td style="width:43.4pt;"> 5 </td> 
 <td colspan="2" style="width:302.7pt;"> 整体显示效果美观 </td> 
 </tr> 
 <tr> 
 <td style="width:25.3pt;"> &nbsp; </td> 
 <td style="width:43.4pt;"> 5 </td> 
 <td colspan="2" style="width:302.7pt;"> 命名规范，可读性好，编码书写有缩进 </td> 
 </tr> 
 <tr> 
 <td colspan="3" style="width:69.3pt;"> 总分 </td> 
 <td style="width:302.1pt;"> 100分 </td> 
 </tr> 
 </tbody> 
</table>

## 四、实现代码： ##

<!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()"/>
 			 
 			<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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70]: /images/20221120/bf9e72dc05014038a77c3d4ea305b1dd.png