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

一、语言和环境

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

二、题目（100分）：

  • 使用Jquery和JavaScript实现二级分类菜单管理
  1. 点击“添加一级分类”能添加一行一级分类
  2. 点击“添加子分类”能添加一行二级分类
  3. 点击“删除”可以删除该级分类
  4. 点击“全选”可以实现下列行全选

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

三、评分标准

题目：二级分类菜单管理

该程序评分标准如下：

20

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

 

10

正确显示操作界面

 

10

正确使用a标签链接按钮

30

正确地给html元素添加CSS样式

 

10

添加按钮样式

 

10

设置超链接样式为none,字体大小适中，鼠标悬停有效果

 

10

表格、文本内容居中显示，只设置单元格上边框

40

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

 

5

正确引入Jquery库

 

10

实现点击“添加一级分类”即添加一行一级分类，并附带添加二级分类超链接按钮，和删除超链接按钮

 

10

实现点击“添加子分类”即添加一行二级分类，并附带删除超链接按钮

 

10

点击“全选”实现对所有行全选操作

 

5

点击“删除”可删除该行分类

10

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

 

6

整体显示效果美观

 

4

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

总分

100分

四、实现代码

<!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>

 

posted @ 2020-11-25 22:25  明金同学  阅读(43)  评论(0)  编辑  收藏  举报