一、语言和环境

  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>

云南农职《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分): 使用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. Oracle中的DBMS_LOCK包的使用

    一.DBMS_LOCK相关知识介绍 锁模式: 名字 描述 数据类型 值 nl_mode Null INTEGER 1 ss_mode Sub Shared: used on an aggregate ...

  2. Kotlin 学习（2）

    属性和字段 1.声明属性 Kotlin中可以使用var关键字声明可变属性,或者用val关键字声明只读属性,属性的类型在后面,变量名在前面,中间加冒号和空格. public class Address ...

  3. 常见排序——Java实现

    1 package struct; 2 3 /** 4 * 5 * @作者:dyy 6 * @公司:陕西科技大学 7 * @修改日期: 8 * @邮箱:1101632375@qq.com 9 * @描 ...

  4. OC-代理，字符串

    总结 编号 标题 内容 一 protocol protocol 基本概念/语法格式/protocol和继承区别/使用注意/基协议/@required和@optional关键字/类型限制 二 代理设计模 ...

  5. 1.Vuejs-第一个实例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. [源码解析] PyTorch分布式优化器(3)---- 模型并行

    [源码解析] PyTorch分布式优化器(3)---- 模型并行 目录 [源码解析] PyTorch分布式优化器(3)---- 模型并行 0x00 摘要 0x01 前文回顾 0x02 单机模型 2.1 ...

  7. Mysql配置 主从同步

    目录 一.准备 二.操作 主数据库操作 从服务器操作 一.准备 1.主从数据库版本最好一致 2.主从数据库内数据保持一致,若不一致,可将从库中所有数据删除,并将主库全部数据导入进去 主数据库:182. ...

  8. M函数目录（Power Query 之 M 语言）

    2021-12-11更新 主页(选项卡) 管理列(组) 选择列 选择列Table.SelectColumns 删除列 删除列Table.RemoveColumns 删除其他列Table.SelectC ...

  9. mysql 字符串转日期及其他日期转换

    -- 字符串转日期 select str_to_date('2019/1/1', '%Y/%m/%d') -- 2019-01-01 SELECT STR_TO_DATE(concat(Cyear,' ...

  10. 宕机导致分区丢失恢复方案testdisk

    一.执行此预案的动机 云主机数据盘分区丢失 二.执行此预案的条件 1.确定用户在报障时间点之前有过数据盘分区存在,而在报障时间点该分区消失 2.在执行我们的恢复操作之前,确保将分区所在数据盘进行备份 ...