jquery 动态生成li_jquery 动态添加和删除 ul li列表

今天需要实现一个jquery动态添加和删除  ul li列表中的li行，自己简单的实现乐一个，分享一下

jQuery add/remove ul li

#nav{width:1000px;height:450px;border-top:# 2px solid;margin-top:10px;border-bottom:# 2px solid;background-color:#;margin-left:50px;}

#nav ul{list-style:none;line-height:40px;}

#nav li{display:block;float:left;padding:15px;line-height:50px;}

#nav a{display:block;color:#fff;text-decoration:none;padding:0px;}

#nav a:hover{background-color:#;}

input {margin-top:10px;margin-left:50px;width:100px;height:50px;font-size:15px;}

$(document).ready(function(){

//按钮的点击事件，每次点击的时候动态的创建一个 li对象，jquery直接通过 ul对象的id，使用 append 方法 动态的把li添加到ul里面

$("#addButton").bind("click",function(){

var google = Math.random();

var msg = "

删我 " + google + "";

$("#colist").append(msg);

//每次添加万一个元素后，都会给改li绑定移除事件

bindListener();

});

//

function bindListener(){

//给所有的 ul li重新绑定移除事件

$("#colist li a").unbind().click(function(){

//直接通过.remove() 方法移除掉li元素,页面自动就会刷新

$(this).parent().remove();

});

}

//jquery 检索ul li的所有元素

$("#collect").click(function(){

var data = "";

$("#nav").find("ul li span").each(function(index,value){

data += $(this).text() + "|";

})

alert(data);

})

})

上面是一个简单的测试例子，下面是项目中实际使用的例子

对应的js方法

function addTocustom(appid)

{

//这里remove 改行，然后保存数据库

//父页面刷新定制窗口，重新加载

//window.parent.backclose();

$("#show_"+appid).parent().parent().parent().remove();

}

对应的div ul li的代码，点击添加按钮后 ，会把该行数据添加到别的页面，并删除改行数据

• 

  ${item.APP_NAME}

  添加

利用jquery动态添加和删除表格的一行，并且保存单行数据

开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码 界面使用了freemarker框架,teams是后台传过来的list类型数据

jQuery动态添加、删除按钮及input输入框

输入框的加减实现:

动态创建按钮

jQuery动态添加和删除表格行

jQuery 动态添加、删除css样式

1.addClass css中:

jQuery动态添加删除select项

// 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...

jQuery如何动态添加具有删除按钮的行

代码实例如下:

jquery动态添加删除div--事件绑定,对象克隆

我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...

jQuery动态添加删除CSS样式

jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式

JQuery动态添加控件并取值

...

随机推荐

看懂SqlServer查询计划【转】

原文链接:http://www.cnblogs.com/fish-li/archive/2011/06/06/2073626.html 开始 SQL Server 查找记录的方法 SQL Server ...

Docker 在6.4上安装

1 在 CentOS 6.4 上安装 docker docker当前官方只支持Ubuntu,所以在 CentOS 安装Docker比较麻烦(Issue #172). docker官方文档说要求Li ...

java 复习001

java 复习001 比较随意的记录下我的java复习笔记 ArrayList 内存扩展方法 分配一片更大的内存空间,复制原有的数据到新的内存中,让引用指向新的内存地址 ArrayList在内存不够时 ...

ORA-01653:表空间扩展失败的问题

以下内容来源于ORA-01653:表空间扩展失败的问题   今天发现,原来设备的数据表空间只有5M,已经满了,上网去找发现要进行扩展空间. 一.脚本修改方式: ----查询表空间使用情况---使用DB ...

Flask-SQLALchemy查询

from: http://blog.sina.com.cn/s/blog_633277f90100kpvm.html 似乎ORM最难设计的部分是查询.特别是面向对象的查询,今天学习SQLAlchemy ...

均价 和 最新价格 是啥意思 什么是MACD DIFF DEA 指标？

均价=当前时刻成交的总价格/成交的总量 最新价格=当前时刻的价格 一.平滑异同平均线(Moving Average Convergence Divergence)原理:MACD(Moving Aver ...

Find and run the whalesay image

Find and run the whalesay image People all over the world create Docker images. You can find these i ...

[.NET Core] 简单读取 json 配置文件

简单读取 json 配置文件 背景 目前发现网上的 .NET Core 读取配置文件有点麻烦,自己想搞个简单点的. .NET Core 已经不使用之前的诸如 app.config 和 web.conf ...

如何让Mac、Windows可以互相远程

您可以通过Mac来远程Windows桌面:也可通过Windows来远程Mac界面:甚至还可以通过iOS或Android来远程Mac或Windows. Windows的操作方法,以Windows XP ...

Lua中assert( )函数的使用

当Lua遇到不期望的情况时就会抛出错误,比如:两个非数字进行相加:调用一个非函数的变量:访问表中不存在的值等.你也可以通过调用error函数显示的抛出错误,error的参数是要抛出的错误信息. ass ...