一、语言和环境

  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. HttpClient连接池设置引发的一次雪崩

    事件背景 我在凤巢团队独立搭建和运维的一个高流量的推广实况系统,是通过HttpClient 调用大搜的实况服务.最近经常出现Address already in use (Bind failed)的问 ...

  2. linux 6.5 网卡

    启动网卡 ifup eth0 eth0:网卡名称 设置网卡开机启动 vi /etc/sysconfig/network-scripts/ifcfg-eth0 ONBOOT=yes

  3. redis 之 哨兵

    #:编译安装redis4.0 [root@master ~]# tar xf redis-4.0.14.tar.gz [root@master ~]# cd redis-4.0.14/ [root@m ...

  4. 【Linux】【Basis】Kernel

    Linux Kernel:               CentOS启动流程:POST --> Bootloader(BIOS, MBR) --> Kernel(initrd) --> ...

  5. 【Java多线程】线程池-ThreadPoolExecutor

    ThreadPoolExecutor提供了四个构造方法: 我们以最后一个构造方法(参数最多的那个),对其参数进行解释: public ThreadPoolExecutor(int corePoolSi ...

  6. springmvc中文件跨服务器传输的方法

    //1.首先在tomcat的新端口上重新开启一个tomcat服务器fileuploadserver服务器,并且在webapps下新建一个uploads文件夹 //2.在业务服务器上书写前端页面和后端的 ...

  7. 8.Vue.js-计算属性

    计算属性关键词: computed. 计算属性在处理一些复杂逻辑时是很有用的. 可以看下以下反转字符串的例子: <!DOCTYPE html><html><head> ...

  8. [BUUCTF]PWN——mrctf2020_easyoverflow

    mrctf2020_easyoverflow 附件 步骤: 例行检查,64位程序,保护全开 本地试运行的时候就直接一个输入,然后就没了,直接用64位ida打开 只要满足18行的条件,就能够获取shel ...

  9. Table.CombineColumns合并…Combine…（Power Query 之 M 语言）

    数据源: 任意表,表中列数超过两列 目标: 其中两列合并为一列 操作过程: 选取两列>[转换]>[合并列]>选取或输入分隔符>输入新列名>[确定]   M公式:  = T ...

  10. Excel里的格式会自动变成日期或会计专用吗？（Excel技巧集团）

    Excel里的格式会自动变成日期或会计专用? 正常情况下当然不会了,可是最近却有很多很多同学问这样的问题,并把这个问题列成了Excel2007和2010的一个Bug,可是小妖同学却从来没遇到过这样的问 ...