云南农职《JavaScript交互式网页设计》 综合机试试卷⑤——简单分类菜单
一、语言和环境
- 实现语言:HTML,CSS,JavaScript,JQuery。
- 开发环境:HBuilder。
二、题目(100分):
1、使用Jquery和JavaScript实现二级分类菜单管理
- 点击“添加一级分类”能添加一行一级分类
- 点击“添加子分类”能添加一行二级分类
- 点击“删除”可以删除该级分类,并且删除一级分类的同时,相关二级分类也随之删除。
- 点击“全选”可以实现下列行全选,再次点击取消,当其中一个取消后全选复选框不被选中,当全部选中后全选复选框选中。

2、推荐实现步骤
- 在HTML页面中,选择合适的插入方法插入相关节点。
- 使用remove()方法实现分类的删除操作,可通过js方式或者jquery方式获取相关节点并删除。
- 提示:复选框的checked的属性值为false时说明未被选中,为true或者checked时状态为选中。
- 合理使用选择器,可以简化代码。
三、评分标准
题目:二级分类菜单管理 |
|||
该程序评分标准如下: |
|||
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交互式网页设计》 综合机试试卷⑤——简单分类菜单的更多相关文章
- JavaScript交互式网页设计作业目录(作业笔记)
JavaScript交互式网页设计笔记 • [目录] 我的大学笔记>>> 第1章 JavaScript基本语法>>> 1.1.4 使用 JavaScript 的 H ...
- JavaScript交互式网页设计笔记 • 【目录】
章节 内容 实践练习 JavaScript交互式网页设计作业目录(作业笔记) 第1章 JavaScript交互式网页设计笔记 • [第1章 JavaScript基本语法] 第2章 JavaScript ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷③——实现二级分类菜单
一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 使用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 使 ...
随机推荐
- 【排序算法】——冒泡排序、选择排序、插入排序、Shell排序等排序原理及Java实现
排序 1.定义: 所谓排序,即是整理文件中的内容,使其按照关键字递增或递减的顺序进行排列. 输入:n个记录,n1,n2--,其对应1的关键字为k1,k2-- 输出:n(i1),n(i2)--,使得k( ...
- Spring Boot事务支持
一.创建项目 二.添加依赖 <dependencies> <dependency> <groupId>org.projectlombok</groupId&g ...
- 【Linux】【Services】【SaaS】Docker+kubernetes(3. 用ansible管理机器和软件)
1. 简介 1.1. 公司环境使用的puppet,但是我更喜欢ansible,原因有二,第一,我是红帽的忠粉:),第二,我对python比较熟悉 1.2. ansible官方网站:https://ww ...
- 【Services】【Web】【apr】安装apr
1. 基础: 1.1 描述:apr全称Apache Portable Runtime,常用于与ssl相关的环境支持,比如openssl,httpd,nginx,tomcat 1.2 链接: 官方网站: ...
- PL/SQL实例1
declare --定义游标 cursor cemp is select to_char(hiredate,'yyyy') from emp; phiredate varchar2(4); ...
- Python模块和函数
目录 一.基础 二.特殊函数 一.基础 #导入模块 import xxx #调用 xxx.dd() from xxx import xx as dd #导入某个函数,as给函数加别名,调用xx() ...
- Nginx区分搜索引擎
目录 一.简介 二.配置 一.简介 场景: 当从百度点进来显示中文页面,而谷歌显示英文界面. 原理: 根据referer头来判断 二.配置 这样配置以后,凡是从百度或者google点过来的请求都会跳转 ...
- JS 双向数据绑定、单项数据绑定
简单的双向数据绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- CF740B Alyona and flowers 题解
Content 有 \(n\) 个数 \(a_1,a_2,a_3,...,a_n\),给定 \(m\) 个区间,你可以选择一些区间使得它们的总和最大(也可以不选),求这个最大的总和. 数据范围:\(1 ...
- Birt报表分组格式调整
1.以如下SQL语句来说明,查找未完成打分的人员,有cname(测评人名字),uname(测评人单位),bname(被测评人名字),flag字段(未完成标志) SELECT var.cname,var ...