一、语言和环境
实现语言：HTML,CSS,JavaScript,JQuery。开发环境：HBuilder。二、题目（100分）：
使用Jquery和JavaScript实现二级分类菜单管理点击“添加一级分类”能添加一行一级分类点击“添加子分类”能添加一行二级分类点击“删除”可以删除该级分类点击“全选”可以实现下列行全选推荐实现步骤在HTML页面中，使用外部插入after()方法在指定行对象后面插入一行分类使用remove()方法实现分类的删除操作，通过parent()方法获取元素对象的父类通过输入框的checked属性设置实现全选操作设置表格边框只显示顶部可实现简约效果三、评分标准
四、实现代码
<!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交互式网页设计》 综合机试试卷③——实现二级分类菜单》对你有帮助，请点赞、收藏，并留下你的观点哦！
