云南农职《JavaScript交互式网页设计》综合机试试卷③——实现二级分类菜单

古城微笑少年丶 2022-12-24 00:41 19阅读 0赞

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

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

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

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

1.  点击“添加一级分类”能添加一行一级分类
2.  点击“添加子分类”能添加一行二级分类
3.  点击“删除”可以删除该级分类
4.  点击“全选”可以实现下列行全选

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70][]

*  **推荐实现步骤**

1.  在HTML页面中，使用外部插入after()方法在指定行对象后面插入一行分类
2.  使用remove()方法实现分类的删除操作，通过parent()方法获取元素对象的父类
3.  通过输入框的checked属性设置实现全选操作
4.  设置表格边框只显示顶部可实现简约效果

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

<table style="width:371.4pt;"> 
 <tbody> 
  <tr> 
   <td colspan="4" style="width:371.4pt;"> <p><strong><strong>题目：</strong></strong>二级分类菜单管理</p> </td> 
  </tr> 
  <tr> 
   <td colspan="4" style="width:371.4pt;"> <p>该程序评分标准如下：</p> </td> 
  </tr> 
  <tr> 
   <td style="width:25.3pt;"> <p style="margin-left:0pt;">20</p> </td> 
   <td colspan="3" style="width:346.1pt;"> <p>正确按照效果图编写出html代码</p> </td> 
  </tr> 
  <tr> 
   <td style="width:25.3pt;"> <p style="margin-left:0pt;">&nbsp;</p> </td> 
   <td colspan="2" style="width:44pt;"> <p style="margin-left:0pt;">10</p> </td> 
   <td style="width:302.1pt;"> <p>正确显示操作界面</p> </td> 
  </tr> 
  <tr> 
   <td style="width:25.3pt;"> <p style="margin-left:0pt;">&nbsp;</p> </td> 
   <td colspan="2" style="width:44pt;"> <p style="margin-left:0pt;">10</p> </td> 
   <td style="width:302.1pt;"> <p>正确使用a标签链接按钮</p> </td> 
  </tr> 
  <tr> 
   <td style="width:25.3pt;"> <p style="margin-left:0pt;">30</p> </td> 
   <td colspan="3" style="width:346.1pt;"> <p style="margin-left:-.9pt;">正确地给html元素添加CSS样式</p> </td> 
  </tr> 
  <tr> 
   <td style="width:25.3pt;"> <p style="margin-left:0pt;">&nbsp;</p> </td> 
   <td colspan="2" style="width:44pt;"> <p style="margin-left:-.9pt;">10</p> </td> 
   <td style="width:302.1pt;"> <p style="margin-left:-.9pt;">添加按钮样式</p> </td> 
  </tr> 
  <tr> 
   <td style="width:25.3pt;"> <p style="margin-left:0pt;">&nbsp;</p> </td> 
   <td colspan="2" style="width:44pt;"> <p style="margin-left:-.9pt;">10</p> </td> 
   <td style="width:302.1pt;"> <p style="margin-left:-.9pt;">设置超链接样式为none,字体大小适中，鼠标悬停有效果</p> </td> 
  </tr> 
  <tr> 
   <td style="width:25.3pt;"> <p style="margin-left:0pt;">&nbsp;</p> </td> 
   <td colspan="2" style="width:44pt;"> <p style="margin-left:-.9pt;">10</p> </td> 
   <td style="width:302.1pt;"> <p style="margin-left:-.9pt;">表格、文本内容居中显示，只设置单元格上边框</p> </td> 
  </tr> 
  <tr> 
   <td style="width:25.3pt;"> <p style="margin-left:0pt;">40</p> </td> 
   <td colspan="3" style="width:346.1pt;"> <p style="margin-left:-.9pt;">正确编写JS/JQuery代码实现分级分类菜单操作</p> </td> 
  </tr> 
  <tr> 
   <td style="width:25.3pt;"> <p style="margin-left:0pt;">&nbsp;</p> </td> 
   <td colspan="2" style="width:44pt;"> <p style="margin-left:-.9pt;">5</p> </td> 
   <td style="width:302.1pt;"> <p style="margin-left:-.9pt;">正确引入Jquery库</p> </td> 
  </tr> 
  <tr> 
   <td style="width:25.3pt;"> <p style="margin-left:0pt;">&nbsp;</p> </td> 
   <td colspan="2" style="width:44pt;"> <p style="margin-left:-.9pt;">10</p> </td> 
   <td style="width:302.1pt;"> <p style="margin-left:-.9pt;">实现点击“添加一级分类”即添加一行一级分类，并附带添加二级分类超链接按钮，和删除超链接按钮</p> </td> 
  </tr> 
  <tr> 
   <td style="width:25.3pt;"> <p style="margin-left:0pt;">&nbsp;</p> </td> 
   <td colspan="2" style="width:44pt;"> <p style="margin-left:-.9pt;">10</p> </td> 
   <td style="width:302.1pt;"> <p style="margin-left:-.9pt;">实现点击“添加子分类”即添加一行二级分类，并附带删除超链接按钮</p> </td> 
  </tr> 
  <tr> 
   <td style="width:25.3pt;"> <p style="margin-left:0pt;">&nbsp;</p> </td> 
   <td colspan="2" style="width:44pt;"> <p style="margin-left:-.9pt;">10</p> </td> 
   <td style="width:302.1pt;"> <p style="margin-left:-.9pt;">点击“全选”实现对所有行全选操作</p> </td> 
  </tr> 
  <tr> 
   <td style="width:25.3pt;"> <p style="margin-left:0pt;">&nbsp;</p> </td> 
   <td colspan="2" style="width:44pt;"> <p>5</p> </td> 
   <td style="width:302.1pt;"> <p style="margin-left:-.9pt;">点击“删除”可删除该行分类</p> </td> 
  </tr> 
  <tr> 
   <td style="width:25.3pt;"> <p style="margin-left:0pt;">10</p> </td> 
   <td colspan="3" style="width:346.1pt;"> <p style="margin-left:.7pt;">整体效果美观以及代码编写规范</p> </td> 
  </tr> 
  <tr> 
   <td style="width:25.3pt;"> <p style="margin-left:0pt;">&nbsp;</p> </td> 
   <td style="width:43.4pt;"> <p style="margin-left:0pt;">6</p> </td> 
   <td colspan="2" style="width:302.7pt;"> <p style="margin-left:.7pt;">整体显示效果美观</p> </td> 
  </tr> 
  <tr> 
   <td style="width:25.3pt;"> <p style="margin-left:0pt;">&nbsp;</p> </td> 
   <td style="width:43.4pt;"> <p style="margin-left:0pt;">4</p> </td> 
   <td colspan="2" style="width:302.7pt;"> <p style="margin-left:.7pt;">Id和class命名规范，可读性好，编码书写有缩进</p> </td> 
  </tr> 
  <tr> 
   <td colspan="3" style="width:69.3pt;"> <p style="margin-left:0pt;"><strong><strong>总分</strong></strong></p> </td> 
   <td style="width:302.1pt;"> <p style="margin-left:0pt;"><strong><strong>10</strong></strong><strong><strong>0</strong></strong><strong><strong>分</strong></strong></p> </td> 
  </tr> 
 </tbody> 
</table>

## 四、实现代码 ##

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    		<style type="text/css">
    			.btn {
    				margin: 30px 10px;
    				color: white;
    				background-color: #d9534f;
    				border: 1px solid transparent;
    				border-radius: 4px;
    				font-size: 14px;
    				line-height: 1.48524;
    				padding: 6px 12px;
    				font-family: "微软雅黑";
    			}
    			
    			#content {
    				/*border: 1px solid #B81900;*/
    				margin: 0 auto;
    				width: 60%;
    			}
    			
    			table {
    				background-color: #fff;
    				width: 100%;
    				border: transparent;
    				margin: 0 auto;
    				border-spacing: 0;
    			}
    			
    			td {
    				width: 25%;
    				padding: 8px;
    				line-height: 1.42857143;
    				border-top: 1px solid #ddd;
    				text-align: center;
    			}
    			
    			input {
    				text-align: center;
    				border: transparent;
    			}
    			
    			a {
    				text-decoration: none;
    			}
    			
    			.search {
    				border-radius: 4px;
    				border: 1px solid #CCCCCC;
    				height: 25px;
    				text-align: left;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div id="content">
    			<button class="btn" onclick="add()">添加一级分类</button>
    			<input type="text" name="" class="search" id="" value="" />
    			<input type="button" name="" class="btn" id="" value="查询" />
    
    			<hr />
    			<table>
    				<tr class="item_box">
    					<th><input type="checkbox" name="" id="allCheck" onchange="allCheck()" value="" />全选</th>
    					<th>分类</th>
    					<th>子菜单</th>
    					<th>操作</th>
    				</tr>
    				<tr>
    					<td><input type="checkbox" name="" id="" value="" /></td>
    					<td><input type="text" readonly name="" id="" value="一级分类" ondblclick="modify(this)" onblur="save(this)"/></td>
    					<td>
    						<a href="#" onclick="addChild(this)">添加子分类</a>
    					</td>
    					<td>
    						<a href="#" onclick="delChild(this)">删除</a>
    					</td>
    				</tr>
    				
    			</table>
    		</div>
    
    		<script type="text/javascript">
    			//添加一级菜单分类
    			function add() {
    				var th_obj = $(".item_box");
    				th_obj.after('<tr>' +
    					'<td><input type="checkbox" name="" id="" value="" /></td>' +
    					'<td><input type="text" class="text_val" readonly name="" id="" value="一级分类"  ondblclick="modify(this)" onblur="save(this)"/></td>' +
    					'<td><a href="#" onclick="addChild(this)">添加子分类</a></td>' +
    					'<td><a href="#" onclick="delChild(this)">删除</a></td>' +
    					'</tr>');
    			}
    
    			//删除子菜单分类
    			function delChild(item) {
    				//获取a标签的爷爷节点
    				//parent()方法是jQuery中的方法，只能通过jQuery对象来调用：$(a).parent();
    				//parentNode是js中的获取父节点的属性，通过js对象调用：obj.parentNode;
    				//var tr_item=$(item).parent().parent();
    				var tr_item = item.parentNode.parentNode;
    				tr_item.remove();
    			}
    			
    			//添加二级分类
    			function addChild(item) {
    				var trr = item.parentNode.parentNode;
    //				var tr_item=$(item).parent().parent();
    				$(trr).after('<tr>' +
    					'<td colspan="3"><input type="text" readonly name="" id="" value="二级分类" ondblclick="modify(this)" onblur="save(this)"/></td>' +
    					'<td><a href="#" onclick="delChild(this)">删除</a></td>' +
    					'</tr>');
    			}
    			//设置全选
    			function allCheck(){
    				//获取到全选的对象
    				var allCheck=document.getElementById("allCheck");
    				//遍历出下面有多少个子选项
    				var inpt=$("input[type='checkbox']:not(#allCheck)");
    				for(var i=0;i<inpt.length;i++){
    					//将全选按钮的选中属性赋值给每一个复选框的选中属性
    					inpt[i].checked=allCheck.checked;
    				}
    			}
    			
    			//双击修改分类的名称
    			function modify(item){
    				//显示出输入框的边框
    				$(item).css("border","1px solid black");
    				//删除输入框的只读属性
    				$(item).removeAttr("readonly");
    			}
    			//光标离开输入框保存输入框的值
    			function save(item){
    				//消除输入框的边框
    				$(item).css("border","transparent");
    				//设置输入框的只读属性
    				$(item).attr("readonly","readonly");
    			}
    		</script>
    	</body>
    
    </html>

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