云南农职《JavaScript交互式网页设计》综合机试试卷③—

一、语言和环境

实现语言：HTML,CSS,JavaScript,JQuery。
开发环境：HBuilder。

二、题目（100分）：

使用Jquery和JavaScript实现二级分类菜单管理

点击“添加一级分类”能添加一行一级分类
点击“添加子分类”能添加一行二级分类
点击“删除”可以删除该级分类
点击“全选”可以实现下列行全选

推荐实现步骤

在HTML页面中，使用外部插入after()方法在指定行对象后面插入一行分类
使用remove()方法实现分类的删除操作，通过parent()方法获取元素对象的父类
通过输入框的checked属性设置实现全选操作
设置表格边框只显示顶部可实现简约效果

三、评分标准

题目：二级分类菜单管理
该程序评分标准如下：
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交互式网页设计》综合机试试卷③——实现二级分类菜单的更多相关文章

JavaScript交互式网页设计作业目录（作业笔记）
JavaScript交互式网页设计笔记 • [目录] 我的大学笔记>>> 第1章 JavaScript基本语法>>> 1.1.4 使用 JavaScript 的 H ...
JavaScript交互式网页设计笔记 • 【目录】
章节内容实践练习 JavaScript交互式网页设计作业目录(作业笔记) 第1章 JavaScript交互式网页设计笔记 • [第1章 JavaScript基本语法] 第2章 JavaScript ...
云南农职《JavaScript交互式网页设计》综合机试试卷⑤——简单分类菜单
一.语言和环境实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 1.使用Jquery和JavaScript实现二级分类菜单管理 ...
云南农职《JavaScript交互式网页设计》综合机试试卷①——实现购物车的结算
一.语言和环境实现语言:javascript.html.css. 开发环境:HBuilder. 二.题目2(100分) 1.功能需求: 马上过节了,电商网站要进行促销活动,需要实现该商城购物车的商品 ...
云南农职《JavaScript交互式网页设计》综合机试试卷②——实现轮播图效果
一.语言和环境实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 使用JQuery淡入淡出动画,实现轮播图效果每隔2秒钟切换一张 ...
云南农职《JavaScript交互式网页设计》综合机试试卷④——蔚蓝网导航栏
一.语言和环境实现语言:javascript.html.css. 开发环境:HBuilder. 二.题目(100分) 1.功能需求: 布局出顶部导航栏目鼠标放到新手入门显示对象的下拉列表鼠标移开 ...
云南农职《JavaScript交互式网页设计》综合机试试卷⑥——简易旅游网
本页面分为顶部导航.登录注册栏,中部图片展示.主体内容和底部反馈模板一.导航栏部分要求一:设置菜单栏(二级菜单)和登录注册模块要求二:当鼠标悬停到菜单栏(一级菜单)时,二级菜单以滑动效果滑出显示 ...
JavaScript交互式网页设计 • 【第5章 JavaScript对象】
全部章节 >>>> 本章目录 5.1 Object 对象和 Date 对象 5.1.1 JavaScript 的内部对象 5.1.2 Object对象 5.1.3 Date ...
JavaScript交互式网页设计 • 【第3章 JavaScript浏览器对象模型】
全部章节 >>>> 本章目录 3.1 浏览器对象模型 3.1.1 浏览器对象模型 3.2 window 对象 3.2.1 window 对象的常用属性及方法 3.2.2 使 ...

随机推荐

k8s配置中心-configmap,Secret密码
目录 k8s配置中心-configmap,Secret 创建ConfigMap 使用ConfigMap subPath参数 Secret 官方文档编写secret清单使用secret 在 Pod ...
寻找pair
给定n个整数使其两两组合成一对pair,例如给定 1 ,2 可以组成的pair为(1,1),(1,2),(2,1),(2,2),然后在这些pair中寻找第k小的pair. 输入第一行包含两个数字,第一 ...
Android 清除本地缓存
主要功能:清除内.外缓存,清除数据库,清除Sharepreference,清除files和清除自定义目录 public class DataCleanManager { //清除本应用内部缓存(/da ...
KVM配置
安装依赖包(因最小化安装) [root@slave-master ~]# yum install -y vim wget tree lrzsz gcc gcc-c++ automake pcre pc ...
BS版本的TCP程序
// 使用Socket对象中的方法getInputStream,获取到网络字节输入流InputStream对象 InputStream is = socket.getInputStream();// ...
KrakenD url匹配通配符 url_pattern wildcard
KrakenD是一个高性能Api网关, api转发的推荐做法是每个api一个配置项,也就是一个endpoint,其开发者认为api网关和纯粹的L7路由不一样(文章链接). 因此社区版并没有提供通配符 ...
python3约瑟夫环问题
问题描述:n个人围成一个圈,从第一个人开始数1,数到第k个出局,然后下一个人继续从1数,求出局人编号思路:将所有人编号放到数组里,一个人出局后,下一个人加上k对数组长度求余,得出下一个要删除的编号. ...
《手把手教你》系列技巧篇（五十一）-java+ selenium自动化测试-字符串操作-下篇（详解教程）
1.简介自动化测试中进行断言的时候,我们可能经常遇到的场景.从一个字符串中找出一组数字或者其中的某些关键字,而不是将这一串字符串作为结果进行断言.这个时候就需要我们对字符串进行操作,宏哥这里介绍两种 ...
Vue2与Vue3的组件通讯对比
Vue2 父传子父传子比较简单, 主要通过以下步骤实现父在template中为子绑定属性 <Child :childData='pMsg'/>  ...
MH/T4029.3 IFPL报文解析
MH/T4029.3是民航业用来规定飞行计划相关数据交互的规范,今天我们先来解析下其中I类的IFPL报文. 我们先来看看IFPL报文长啥样. ZCZC -TITLE IFPL -FILTIM 0109 ...

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

一、语言和环境

二、题目（100分）：

三、评分标准

四、实现代码

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

随机推荐

热门专题

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

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