一、语言和环境

  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>

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

  1. JavaScript交互式网页设计作业目录（作业笔记）

    JavaScript交互式网页设计笔记 • [目录] 我的大学笔记>>> 第1章 JavaScript基本语法>>> 1.1.4 使用 JavaScript 的 H ...

  2. JavaScript交互式网页设计笔记 • 【目录】

    章节 内容 实践练习 JavaScript交互式网页设计作业目录(作业笔记) 第1章 JavaScript交互式网页设计笔记 • [第1章 JavaScript基本语法] 第2章 JavaScript ...

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

    一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 1.使用Jquery和JavaScript实现二级分类菜单管理 ...

  4. 云南农职《JavaScript交互式网页设计》 综合机试试卷①——实现购物车的结算

    一.语言和环境 实现语言:javascript.html.css. 开发环境:HBuilder. 二.题目2(100分) 1.功能需求: 马上过节了,电商网站要进行促销活动,需要实现该商城购物车的商品 ...

  5. 云南农职《JavaScript交互式网页设计》 综合机试试卷②——实现轮播图效果

    一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 使用JQuery淡入淡出动画,实现轮播图效果 每隔2秒钟切换一张 ...

  6. 云南农职《JavaScript交互式网页设计》 综合机试试卷④——蔚蓝网导航栏

    一.语言和环境 实现语言:javascript.html.css. 开发环境:HBuilder. 二.题目(100分) 1.功能需求: 布局出顶部导航栏目 鼠标放到新手入门显示对象的下拉列表 鼠标移开 ...

  7. 云南农职《JavaScript交互式网页设计》 综合机试试卷⑥——简易旅游网

    本页面分为顶部导航.登录注册栏,中部图片展示.主体内容和底部反馈模板 一.导航栏部分 要求一:设置菜单栏(二级菜单)和登录注册模块 要求二:当鼠标悬停到菜单栏(一级菜单)时,二级菜单以滑动效果滑出显示 ...

  8. JavaScript交互式网页设计 • 【第5章 JavaScript对象】

    全部章节   >>>> 本章目录 5.1 Object 对象和 Date 对象 5.1.1 JavaScript 的内部对象 5.1.2 Object对象 5.1.3 Date ...

  9. JavaScript交互式网页设计 • 【第3章 JavaScript浏览器对象模型】

    全部章节   >>>> 本章目录 3.1 浏览器对象模型 3.1.1 浏览器对象模型 3.2 window 对象 3.2.1 window 对象的常用属性及方法 3.2.2 使 ...

随机推荐

  1. 容器之分类与各种测试（四）——unordered-multiset

    unordered-multiset是不定序关联式容器,其底部是通过哈希表实现功能. (ps:黑色框就是bucket,白色框即为bucket上挂载的元素) 为了提高查找效率,bucket(篮子)的数量 ...

  2. Docker学习（四）——Docker容器连接

    Docker容器连接     容器中可以运行一些网络应用,要让外部也可以访问这些应用,可以通过-P或-p参数来指定端口映射. 下面我们来实现通过端口连接到一个docker容器. 1.网络端口映射    ...

  3. 实现new Date(), 获取当前时间戳

    JS 获取时间戳: 我相信大家找了很久了吧! 希望我写的这个对您有些帮助哦~ 大家是不是以为时间戳是关于时间的,都去 new Date() 里面找方法了啊,我来告诉你们正确的吧 其实大家用 JS 里的 ...

  4. 漏洞扫描器-AWVS

    目录 介绍 漏洞扫描 网络爬虫==漏洞分析.验证 主机发现 子域名探测 SQL注入 HTTP头编辑 HTTP监听 介绍 AWVS为Acunetix Web Vulnarability Scanner的 ...

  5. python f-strings !表达式

    近期看一些框架的文档时发现, python的f-strings有f"{xxx!r}"的写法, 就官网看了一波文档, 特此记录一下, 顺便完善一下f-strings的使用 f-str ...

  6. Android工具 - 随机测试（猴子）

    原创文章,如有转载,请注明出处:http://blog.csdn.net/yihui823/article/details/6697535 本文章的前提:已经安装了Eclipse和ADT.androi ...

  7. 人工水母搜索算法—matlab代码

    clc clear foj = @ Sphere; Lb = -100; % 搜索空间下界 Ub = 100; % 搜索空间上界 N_iter = 1000; % 最大迭代次数 n_pop = 50; ...

  8. 设置项目的开始/完成日期（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 在设定完日程排定方法,或者不作任何设置,依其默认的[项目开始日期]的设置,接下来就要设置项目的开始时间了.依然是在[项目] ...

  9. CF893B Beautiful Divisors 题解

    Content 给定一个数 \(n\),求出 \(n\) 最大的可以表示成 \((2^k-1)\cdot2^{k-1}\) 形式的因数 \(x\). 数据范围:\(1\leqslant n\leqsl ...

  10. LuoguP7426 [THUPC2017] 体育成绩统计 题解

    Update \(\texttt{2021.3.11}\) 修复了一个笔误. Content 太长了,请直接跳转回题面查看. 数据范围:\(n\leqslant 10^4\),\(0\leqslant ...