利用jQuery實現添加刪除分類編輯代碼



20 76 26



特效描述:利用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

加群請備注:從官網了解到

老夫子电子 白小姐开奖结果小 葡京娱乐场官网 五子棋游戏在线玩 北京pk10三分彩计划 c35彩票苹果 北京赛车pk10直播网 云南快乐十分开奖走势图一 怎么在自媒体上赚钱 福利彩票35选7规则 山东时时彩导航 3d打印 购彩计划软件手机版 大乐透开奖直播 蜀缘能赚钱吗 中竟彩网 双色球综合走势图