JS动态增加删除UL节点LI
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);
} www.jbxue.com 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>
JS动态增加删除UL节点LI的更多相关文章
- JS动态增加删除UL节点LI及相关内容示例
<ul id="ul"> <li id=1>11111111111111111<a href="javascript:del(1);&quo ...
- angular.js 动态插入删除dom节点
angular.js 是新一代web开发框架,它轻松在web前端实现了MVC模式,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作dom . 作为前端开发而不去操作dom ,这简直是一个 ...
- Hadoop 2.6.3动态增加/删除DataNode节点
假设集群操作系统均为:CentOS 6.7 x64 Hadoop版本为:2.6.3 一.动态增加DataNode 1.准备新的DataNode节点机器,配置SSH互信,可以直接复制已有DataNode ...
- angular.js ng-repeat动态插入删除dom节点
既然上面提到 angular.js 下无需用户直接操作dom ,而是在编译间断 dom 与 控制层model 实现了双向绑定,一方做出改变,另一方就会立即改变,那问题来了,我想插入一个文本框和按钮,并 ...
- js 动态添加元素(div、li、img等)及设置属性
把一串 html 标签赋给一个 javascript 变量,除属性的值要用转义的双引号外,某些时候字符串还很长,显得有些复杂.如果用 js 动态添加元素,就不会有那么复杂的字符串出现,代码阅读性强一点 ...
- js 动态添加元素 删除元素逻辑
js 动态添加元素 删除元素逻辑 var obox=document.getElementById("box"); oadd.onclick=function(){ var odi ...
- JS动态添加删除html
本功能要求是页面传一个List 集合给后台而且页面可以动态添加删除html代码需求如下: 下面是jsp页面代码 <%@ page language="java" pageEn ...
- Repeater 动态增加删除一行
文章参考:文章参考http://www.cnblogs.com/dataadapter/archive/2012/06/25/2562885.html 效果: 前台代码: <%@ Page La ...
- js 二分搜索树删除子节点
删除的节点含有左子树或者右子树,用其子树来代替成为被删除节点的父节点的子树 删除左右都有孩子的节点,找到右边子树最小的节点作为父节点
随机推荐
- MyEclipse开发Rest服务入门
MyEclipse支持Rest服务,开发起来非常方便,下面我就举一个计算机的例子: 实现功能:加.减.乘.除: 效果如下: Rest服务要点:每个服务或任何东西都有一个URI: 步骤1:创建Web S ...
- PHP高级教程-安全邮件
PHP Secure E-mails 在上一节中的 PHP e-mail 脚本中,存在着一个漏洞. PHP E-mail 注入 首先,请看上一章中的 PHP 代码: <html> < ...
- eclipse git提交代码
1.安装git 2.安装好后,进行,一个简单配置,填入我们的用户名和邮箱 >>Preferences>Team>Git>Configuration 设置自定义仓库 3.登 ...
- Android中保存静态秘钥实践(转)
本文我们将讲解一个Android产品研发中可能会碰到的一个问题:如何在App中保存静态秘钥以及保证其安全性.许多的移动app需要在app端保存一些静态字符串常量,其可能是静态秘钥.第三方appId等. ...
- jsp&html页面知识点集锦
CreateTime--2016年12月16日16:08:03Author:Marydonjsp&html页面知识点集锦1.标签的class属性 标签同时拥有多个class时,要写在同一个 ...
- 【docker】挂载web应用
现在将webapps目录挂载在宿主机目录,方便运维 docker run -p 8090:8080 --name app -v /usr/app:/usr/local/tomcat/webapps d ...
- JAVA虚拟机内存架构
Java在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域.这些区域都有各自的用途.创建和销毁的时间,有一些是随虚拟机的启动而创建,随虚拟机的退出而销毁,有些则是与线程一一对应,随 ...
- shell之“>/dev/null 2>&1”
shell之“>/dev/null 2>&1” http://ixdba.blog.51cto.com/2895551/526442 今天在自己的一个技术群中又被问道了这么一个问题 ...
- 阿里云ESC搭建SVN服务端
CentOS7)下yum命令快速安装svn服务端,学习在思考中独孤中度过,在孤独中进取! 01.SVN服务的安装(subversion) 02.ESC安全组策略 1.在线安装svn服务 $ sudo ...
- Linear Algebra Courses
Lecture 1:Demonstrate the columns of a matrix (imagine the vectors) in N-dimension space.How to mult ...