发布于 2017-01-23 06:18:13 | 85 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


这篇文章主要介绍了JS如何动态增加删除UL节点LI及相关内容,需要的朋友可以参考下
 
<ul id="ul"> 

<li id=1>11111111111111111<a href="javascript:del(1);">del</a></li> 
<li id=2 >22222222222222222<a href="javascript:del(2);">del</a></li> 
<li id=3>33333333333333333<a href="javascript:del(3);">del</a></li> 
<li id=4>44444444444444444<a href="javascript:del(4);">del</a></li> 
<li id=5>55555555555555555<a href="javascript:del(5);">del</a></li> 

</ul> 
<select name="car_type" id="car_type" onchange="add_car(this);" > 
<option value="">please select</option> 
<option value="car_11">11111</option> 
<option value="car_22">22222</option> 
<option value="car_33">33333</option> 
<option value="car_44">44444</option> 
</select > 
<input type="text" id="ul_value" onclick="getulvalue();" name="ul_value" value=""> 
<script> 

function $$(id){ 
var obj=document.getElementById(id); 
return obj; 
} 

function del(n) { 
$$('ul').removeChild($$(n)); 
} 

function add(id,txt) { 
var ul=$$('ul'); 
var li= document.createElement("li"); 
var href_a = document.createElement("a"); 
href_a.href="javascript:del('"+id+"');"; 
href_a.innerHTML ="del"; 
li.innerHTML=txt; 
li.id=id; 
li.appendChild(href_a); 
ul.appendChild(li); 
} 

function add_car(obj){ 
//chk ul childNodes length 
if($$('ul').childNodes.length<3){ 
var flag=true; 
var ul_obj=$$('ul').childNodes; 
var car_id=obj.options[obj.selectedIndex].value; 
var txt=obj.options[obj.selectedIndex].text; 
if(car_id!=null&&car_id!=""){ 

for(var i=0;i<ul_obj.length;i++){ 

if(ul_obj[i].id==car_id){ 
alert("已经添加!"); 
flag=false; 
} 
} 

if(flag){ 
add(car_id,txt); 
} 
} 

}else{ 
alert("只允许加入三个值!"); 
return; 
} 
} 

function getulvalue(){ 
if($$('ul').childNodes.length==0){ 
alert("请选择相关内容!"); 
return; 
}else{ 
var txt=""; 
for(var i=0;i<$$('ul').childNodes.length;i++){ 
txt+=$$('ul').childNodes[i].id+","; 
} 
$$("ul_value").value=txt; 
} 

} 
</script> 


最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务