jquery 动态添加和删除 ul li列表
今天需要实现一个jquery动态添加和删除 ul li列表中的li行,自己简单的实现乐一个,分享一下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery add/remove ul li</title> <style type="text/css">
#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;}
</style> <script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//按钮的点击事件,每次点击的时候动态的创建一个 li对象,jquery直接通过 ul对象的id,使用 append 方法 动态的把li添加到ul里面
$("#addButton").bind("click",function(){
var google = Math.random();
var msg = "<li><a href='javascript:void(0)'>删我</a><span style='color:yellow;'>" + google + "</span></li>";
$("#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);
})
})
</script> </head> <body> <div id="nav">
<ul id="colist">
</ul>
</div> <input type="button" value="通过jquery动态添加一个心的li" id="addButton" />
<input type="button" value="查询所有的li信息" id="collect" /> </body>
</html>
上面是一个简单的测试例子,下面是项目中实际使用的例子
对应的js方法
<script>
function addTocustom(appid)
{
//这里remove 改行,然后保存数据库
//父页面刷新定制窗口,重新加载
//window.parent.backclose();
$("#show_"+appid).parent().parent().parent().remove(); }
</script>
对应的div ul li的代码,点击添加按钮后 ,会把该行数据添加到别的页面,并删除改行数据
<div id="entrance" class="entrance">
<c:if test="${!(empty appList)}">
<c:set var="count" value=""></c:set>
<ul class="entrance-appsnew-list">
<c:forEach var="item" items="${appList}">
<li class="entrance-appsnew-item">
<a target="_blank" href="${item.APP_URL}" title="${item.APP_NAME}" >
<img class="entrance-appsnew-icon" id="PIC_SHOW" onerror="this.src='${fn:getLink('manage/img/app/large-default.png')}'" src="${fn:getLink('appImageShow.do')}?type=app&picId=${item.picLib.PIC_ID}"/>
</a>
<div class="entrance-appsnew-cont"">
<div class="entrance-appsnew-title">
<h3 class="txt">
<a target="_blank" title="${item.APP_NAME}" href="${item.APP_URL}" >${item.APP_NAME}</a>
</h3>
<span class="cfont count show${item.APP_ID}" id="show_${item.APP_ID}"><a href="javascript:addTocustom('${item.APP_ID}')">添加</a></span>
</div>
</div>
</li>
<c:set var="count" value="${count+1 }"></c:set>
</c:forEach>
</ul>
</c:if>
</div>
jquery 动态添加和删除 ul li列表的更多相关文章
- 利用jquery动态添加和删除表格的一行,并且保存单行数据
开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码 界面使用了freemarker框架,teams是后台传过来的list类型数据 <fo ...
- jQuery动态添加、删除按钮及input输入框
输入框的加减实现: <html> <head> <meta charset="utf-8"> <title>动态创建按钮</t ...
- jQuery动态添加和删除表格行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- jQuery 动态添加、删除css样式
1.addClass css中: <style type="text/css"> .chColor {background: #267cb7;color:w ...
- jQuery动态添加删除select项
// 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...
- jQuery如何动态添加具有删除按钮的行
代码实例如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta ...
- jquery动态添加删除div--事件绑定,对象克隆
我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...
- jQuery动态添加删除CSS样式
jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...
- JQuery动态添加控件并取值
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- 1, sync_with_stdio(), tie()的应用
一.sync_with_stdio() 这个函数是一个“是否兼容stdio”的开关,C++为了兼容C,保证程序在使用了std::printf和std::cout的时候不发生混乱,将输出流绑在了一起. ...
- 基于Sql Server 2008的分布式数据库的实践(四)
原文 基于Sql Server 2008的分布式数据库的实践(四) 数据库设计 1.E-R图 2.数据库创建 Win 7 1 create database V3 Win 2003 1 create ...
- Linux c c++ 开发调试技巧
看到一篇介绍 linux c/c++ 开发调试技巧的文章,感觉挺使用,哪来和大家分享. 通向 UNIX 天堂的 10 个阶梯Author: Arpan Sen, 高级技术人员, Systems Doc ...
- Vim 使用设置
转自:http://www.cnblogs.com/end/archive/2012/06/01/2531147.html Vim 作为最好用的文本编辑器之一,使用vim来编文档,写代码实在是很惬意的 ...
- 【CSDN博客之星评选】我为什么坚持写博客
今天无意中在CSDN的博客之星评选活动看到自己竟然是候选人之一,真的是十分的惊讶也十分的高兴.对于喜欢写东西.喜欢分享的我来说,已经忍不住用文字来记录一下今天的美好心情,同时也让我回想起我是如何开始在 ...
- HDOJ 3790 双权值Dijkstra
#include <iostream> #include <stdio.h> #include <string.h> #include <cstring> ...
- 利用git下载skia库
1.准备好cygwin或者gitbash(github下载) 2.进入进入https://android.googlesource.com/,搜索skia,进入. 3.进入后最上面会显示下载方法:gi ...
- 初探 插头DP
因为这题,气得我火冒三丈! 这数据是不是有问题啊!我用cin代替scanf后居然就AC了(本来一直卡在Test 18)!导致我调(对)试(排)了一个小时!! UPD:后来细细想想,会不会是因为scan ...
- 使用回溯法求所有从n个元素中取m个元素的组合
不多说了,直接上代码,代码中有注释,应该不难看懂. #include <stdlib.h> #include <stdio.h> typedef char ELE_TYPE; ...
- SLF4J warning or error messages and their meanings(转)
The method o.a.commons.logging.impl.SLF4FLogFactory#release was invoked. Given the structure of the ...