云南农职《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 使 ...
随机推荐
- Linux目录结构和基础命令
Linux目录和基础命令 目录 Linux目录和基础命令 1 Linux目录结构 1.1 Linux文件名命令要求 1.2 文件的类型 2. 基础命令 2.1 ls 2.2 cd和pwd 2.3 命令 ...
- [云原生]Docker - 容器
目录 Docker容器 启动容器 新建并启动 启动已终止容器 守护态运行容器 终止容器 进入容器 attach命令 exec命令 导出和导入容器 导出容器 导入容器 删除容器 Docker容器 容器是 ...
- 制作一个有趣的涂鸦物联网小项目（涂鸦模组SDK开发 CBU BK7231N WiFi+蓝牙模组 HSV彩色控制）
实现的功能: l APP控制月球灯 l 本地月球灯控制 l APP控制"大白"颜色,实现各种颜色变身 l 门状态传感器状态APP显示 l 网络状态指示灯,连接服务器长亮, ...
- vue3 到底哪里好？看这一篇就够了
之前写的关于 vue3 的文章,好多人吐槽:这些API每次使用都要引入一遍,感觉有点麻烦. 今天我们就来看看 vue3 相比 vue2 的优点有些啥? 为啥有些人说:自从写了 ts vue3 再也回不 ...
- 转置Table.Transpose（Power Query 之 M 语言）
数据源: 任意五行两列 目标: 转置成两行五列 操作过程: [转换]>[转置] M公式: = Table.Transpose( 表 )
- 判断存在…Contains…（Power Query 之 M 语言）
表函数 判断记录在表中是否存在 = Table.Contains( 表, 记录, {"指定列1",-, "指定列n"}) = Table.ContainsAll ...
- 又拿奖了！腾讯云原生数据库TDSQL-C斩获2021PostgreSQL中国最佳数据库产品奖
日前,开源技术盛会PostgresConf.CN & PGconf.Asia2021大会(简称2021 PG亚洲大会)在线上隆重召开,腾讯云作为业内领先的云数据库服务商受邀出席,多位专家深入数 ...
- AOP——面向切面编程
目录 什么是AOP AOP的作用和优势 作用: 优势: AOP相关术语 AOP的实现方式 使用动态代理的方式 使用XML的方式 使用注解的方式 什么是AOP AOP:全称是Aspect Oriente ...
- tcp十种状态;关于tcp中time_wait状态(2MSL问题)
tcp十种状态 注意: 当一端收到一个FIN,内核让read返回0来通知应用层另一端已经终止了向本端的数据传送 发送FIN通常是应用层对socket进行关闭的结果 关于tcp中time_wait状态的 ...
- django——django链接mysql数据库
1.创建项目 django-admin startproject django_mysql 2.创建App python manage.py startapp app1 3.Mysql数据库配置 (1 ...