一、语言和环境

  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. git 的基本流程

    有个本地文件 打开 新建一个 打开git $ git push origin master 这里是上传文件.  (你每次上传的时候,都要先提交到本地的仓库...然后再上传) github上就有了 如何 ...

  2. Oracle bulk collect into 的几种用法

    bulk collect 和 forall 联合应用写起来显得有些啰嗦,不过为了速度,多写两句又何妨 建立两个临时表 create table T_TEST ( TESTID NUMBER(19) n ...

  3. DOM解析xml学习笔记

    一.dom解析xml的优缺点 由于DOM的解析方式是将整个xml文件加载到内存中,转化为DOM树,因此程序可以访问DOM树的任何数据. 优点:灵活性强,速度快. 缺点:如果xml文件比较大比较复杂会占 ...

  4. 【Spring Framework】12种spring中定义bean的方法

    前言 在庞大的java体系中,spring有着举足轻重的地位,它给每位开发者带来了极大的便利和惊喜.我们都知道spring是创建和管理bean的工厂,它提供了多种定义bean的方式,能够满足我们日常工 ...

  5. 30个类手写Spring核心原理之依赖注入功能（3）

    本文节选自<Spring 5核心原理> 在之前的源码分析中我们已经了解到,依赖注入(DI)的入口是getBean()方法,前面的IoC手写部分基本流程已通.先在GPApplicationC ...

  6. Linux 文件属性及详细操作

    目录 Linux 文件属性 文件属性信息组成 文件属性概念说明 文件软硬链接说明 硬链接 软链接 补充知识 存储数据相关-inode/block inode: block: 读取文件原理图 Linux ...

  7. vue-cli4结合element-ui异常解决(前端小白，文摘取自网络)

    1:将vue-cli4版本退回到vue-cli3 2:使用element-plus 替换 element-ui 传送门 => https://element-plus.gitee.io/#/zh ...

  8. 一文详解 纹理采样与Mipmap纹理——构建山地渲染效果

    在开发一些相对较大的场景时,例如:一片铺满相同草地纹理的丘陵地形,如果不采用一些技术手段,就会出现远处的丘陵较近处的丘陵相比更加的清晰的视觉效果,而这种效果与真实世界中近处的物体清晰远处物体模糊的效果 ...

  9. input type="file"多图片上传

    单个的input type="file"表单也是可以实现多图片上传的 代码如下: <form action="manypic.php" method=&q ...

  10. [BUUCTF]REVERSE——[WUSTCTF2020]level2

    [WUSTCTF2020]level2 附件 步骤: 例行检查,32位程序,upx壳儿 脱完壳儿,扔进32位ida,习惯性的检索字符串,在我没找到什么关键信息,准备去看main函数的时候,将字符串拉到 ...