利用jQuery实现添加删除分类编辑代码



13 49 17



特效描述:利用jQuery实现 添加删除 分类编辑 代码,利用jQuery实现添加删除分类编辑代码

代码结构

1. 引入CSS

<link type="text/css" href="css/style.css" rel="stylesheet" />

2. 引入JS

<script src="js/jquery.min.js"></script>

3. HTML代码

<div style="width:640px;margin:40px auto;">
	<button onClick="add()">新增一级分类</button>
	<div class="demo-box">
		<div>选择</div>
		<div>分类</div>
		<div>子菜单</div>
		<div>删除</div>
	</div>
	<div class="demo-box1">
		<div class="children">
			<div>选择</div>
			<div><input type="text" value="一级分类" class="input-border" readonly  ondblclick="modify(this)" onBlur="save(this)"></div>
			<div onClick="addChildren(this)">添加子分类</div>
			<div onClick="del(this)">删除</div>
		</div>
	</div>
	<p>ps:双击修改text文本框</p>
</div>
<script type="text/javascript">
window.onload=function(){
	document.onkeydown=function(){
		var e=window.event||arguments[0];
		if(e.keyCode==123){
			alert("请尊重劳动成果,谢谢!");
			return false;
		}else if((e.ctrlKey)&&(e.shiftKey)&&(e.keyCode==73)){
			alert("请尊重劳动成果,谢谢!。");
			return false;
		}else if((e.ctrlKey) &&(e.keyCode == 83)){
			alert("请尊重劳动成果,谢谢!");
			return false;
		}
	};
	document.oncontextmenu=function(){
		alert("请尊重劳动成果,谢谢!");
		return false;
	}
}
function add () {
	$('.demo-box').after('<div class="demo-box1"><div class="children"><div>选择</div><div><input type="text" value="一级分类" class="input-border" autofocus  onclick="modify(this)"></div><div onclick="addChildren(this)">添加子分类</div><div onclick="del(this)">删除</div></div></div>')
}
function addChildren(item) {
	item =$(item).parent();
	item.after('<div class="children1"><div></div><div class="padd-l-50"><input type="text" value="二级分类" class="input-border input-active" autofocus ondblclick="modify(this)" onblur="save(this)"></div> <div></div><div onclick="delChildren(this)">删除</div></div>')
}
function delChildren(obj) {
	  obj=$(obj).parent();
	  obj.remove();
}
function del(object) {
	object=$(object).parent().parent();
	object.remove();
}
function modify(item) {
	console.log('获取焦点');
	$(item).css('border','1px solid #ddd')
	$(item).removeAttr("readonly")
}
function save(item) {
	var v = $(item).val()
	if(v.trim().length == 0){
	console.log('不能为空');
	return;
	}else{
	  console.log('失去焦点');
	  $(item).css('border','0')
	  $(item).attr("readonly","readonly")
	}
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 切换按钮 表单 表单美化 表单插件 表单美化插件 文本框 text文本框 添加删除

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到