一、语言和环境

  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. 案例 stm32的dma传输过程

    首先说一下:DMA_GetCurrDataCounter返回值是什么 返回值是dma缓存里还剩余多少空间. 上面本来应该是,发一下,改变一下.但是这里有一行是特殊的. long : 461,*ff l ...

  2. Linux基础命令---mysqlimport导入数据库

    mysqlimport mysqlimport指令可以用来将文本文件中的数据导入到数据库.在导入文本文件的时候,必须确保数据库中有一张表,而且他的名字和文本文件的名字是一样的. 此命令的适用范围:Re ...

  3. entfrm开发平台，一个免费开源可视化的无代码开发平台

    简介 entfrm开发平台,是一个以模块化为核心的无代码开发平台,是一个集PC和APP快速开发.系统管理.运维监控.开发工具.OAuth2授权.可视化数据源管理与数据构建.API动态生成与统计.工作流 ...

  4. 【编程思想】【设计模式】【创建模式creational】原形模式Prototype

    Python版 https://github.com/faif/python-patterns/blob/master/creational/prototype.py #!/usr/bin/env p ...

  5. 使用buffered流结合byte数组，读入文件中的内容，包括中文字符

    package com.itcast.demo05.Buffered;import java.io.BufferedInputStream;import java.io.FileInputStream ...

  6. 【C/C++】学生排队吃饭问题

    问题: 有n个学生,学生们都在排队取餐,第个学生在L国时刻来到队尾,同一时刻来的学生编号小的在前,每个时刻当队列不为空时,排在队头的同学就可以拿到今天的中餐并离开队伍,若第个学生R团时刻不能拿到中餐, ...

  7. scanf("%c\n",&a)和scanf("%c",&a)区别

    scanf("%c",&a); 当输入字符的时候,我们按下任意字符 + 回车的时候,回车没有被当作为分隔符,而是作为一个转义字符与输入的字符一起保存在缓存区.第一次scan ...

  8. netty系列之:性能为王!创建多路复用http2服务器

    目录 简介 多路复用的基础 多路复用在server端的使用 配置TLS处理器 配置clear text upgrade 总结 简介 在之前的文章中,我们提到了在netty的客户端通过使用Http2Fr ...

  9. Redis单点到集群迁移

    目录 一.简介 一.简介 1.环境 源 192.168.1.185的6379 目标 192.168.1.91的7001,7002 192.168.1.92的7003,7004 192.168.1.94 ...

  10. 估计工期标识（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 有时候吧,我们遇到的任务,工期并不是那么好定的,本来嘛,一个项目如果全靠拍脑袋,最后搞不好会被人锤脑袋-- 看来PM有风险 ...