js-列表修改
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
ul li{
list-style: none;
margin-bottom: 5px;
}
a{
text-decoration: none;
color: #333;
}
em{
font-style: normal;
cursor: pointer;
}
.box{
width: 500px;
border: 1px solid #ddd;
margin: 20px auto;
}
.box .header{
background: darkgreen;
color: #fff;
height: 40px;
line-height: 40px;
padding: 10px;
}
#list{
padding:10px;
}
#list .detail{
display: none;
}
</style>
</head>
<body>
<div class="box">
<div class="header">
<span>分类管理</span>
</div>
<div id="list">
<ul>
<li>
<span>我是内容1111111111</span>
<em>修改</em>
<div class="detail">
<input type="text" />
<a class="comfie" href="javascript:;">确定</a>
<a class="del" href="javascript:;">取消</a>
</div>
</li>
<li>
<span>我是内容1111111111</span>
<em>修改</em>
<div class="detail">
<input type="text" />
<a class="comfie" href="javascript:;">确定</a>
<a class="del" href="javascript:;">取消</a>
</div>
</li>
<li>
<span>我是内容1111111111</span>
<em>修改</em>
<div class="detail">
<input type="text" />
<a class="comfie" href="javascript:;">确定</a>
<a class="del" href="javascript:;">取消</a>
</div>
</li>
<li>
<span>我是内容1111111111</span>
<em>修改</em>
<div class="detail">
<input type="text" />
<a class="comfie" href="javascript:;">确定</a>
<a class="del" href="javascript:;">取消</a>
</div>
</li>
<li>
<span>我是内容1111111111</span>
<em>修改</em>
<div class="detail">
<input type="text" />
<a class="comfie" href="javascript:;">确定</a>
<a class="del" href="javascript:;">取消</a>
</div>
</li>
</ul>
</div>
</div>
<script>
/*
完成列表修改
*
* */
var oList = document.getElementById("list")
var oUl = oList.getElementsByTagName("ul")[0]
var oLi = oUl.getElementsByTagName("li")
for (var i=0;i<oLi.length;i++) {
tab(oLi[i])
}
function tab(obj){
var oEm = obj.getElementsByTagName("em")[0]
var oSpan = obj.getElementsByTagName("span")[0]
var oDetail = obj.getElementsByTagName("div")[0]
var oInput = obj.getElementsByTagName("input")[0]
var oA = obj.getElementsByTagName("a")
oEm.onclick = function(){
oSpan.style.display = "none"
this.style.display = "none"
oDetail.style.display = "inline-block"
oInput.value = oSpan.innerHTML
}
oA[0].onclick = function(){
oDetail.style.display = "none"
oSpan.innerHTML = oInput.value
oSpan.style.display = "inline-block"
oEm.style.display = "inline-block"
}
oA[1].onclick = function(){
oDetail.style.display = "none"
oSpan.style.display = "inline-block"
oEm.style.display = "inline-block"
}
}
</script>
</body>
</html>
js-列表修改的更多相关文章
- Eclipse中js文件修改后浏览器不能及时更新的解决办法
项目中js文件修改后浏览器不能及时更新的解决办法 转载:http://www.codeweblog.com/%E9%A1%B9%E7%9B%AE%E4%B8%ADjs%E6%96%87%E4%BB%B ...
- 昆仑游戏[JS加密修改]
昆仑游戏:http://www.kunlun.com/index.html JS加密修改 BigTools=window.BigTools;//重点 RSAKeyPair=window.RSAKeyP ...
- 使用Js脚本 修改控制IE的注册表相关设置(activex等)
使用Js脚本 修改控制IE的注册表相关设置(activex等) 分类: PHP2012-12-05 18:51 2035人阅读 评论(2) 收藏 举报 脚本写法: <SCRIPT LANGUAG ...
- JS列表的下拉菜单组件(仿美化控件select)
JS列表的下拉菜单组件(仿美化控件select) 2014-01-23 23:51 by 龙恩0707, 1101 阅读, 6 评论, 收藏, 编辑 今天是农历23 也是小年,在这祝福大家新年快乐!今 ...
- 微信小程序 JS动态修改样式
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...
- diff.js 列表对比算法 源码分析
diff.js列表对比算法 源码分析 npm上的代码可以查看 (https://www.npmjs.com/package/list-diff2) 源码如下: /** * * @param {Arra ...
- JS动态修改微信浏览器中的title
JS动态修改微信浏览器中的title我们的原理是设置一个ifame然后我们再加载一下就可以实现了,具体的例子如下所示． 平时使用JS修改title,直接document.title=新标题就好了 这样 ...
- 使用CSS/JS代码修改博客模板plus
之前对CSS/JavaScript了解还不深,只是把模板的CSS胡乱修改了几个属性.最近正好也在做一个网站的前端,学习了不少东西,再来改一改~ 上次最后之所以铩羽而归,是因为从CSS里找不到那些#和. ...
- 用JS查看修改CSS样式（cssText,attribute('style'),currentStyle,getComputedStyle）
CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...
- Js 插件修改及优化总结
1. ajaxfileupload 上传插件版本问题以及数据处理问题 参考链接: http://liwx2000.iteye.com/blog/1540321 现在大家至少也在用jquery1.9以上 ...
随机推荐
- OSGI引入Spring DM实现对服务对象的管理
一.异同 熟悉Spring的应该也都了解它的IOC的功能,那么对于在OSGI开发环境下,在使用IOC功能时有什么不同呢?最重要的一点就是Spring上下文对象,每个Spring-Powered Bun ...
- match
//清空数据match (n) detach delete n (一)查询节点1.查询所有节点 //查询数据库中的所有节点 match(n)return n 2.查询带有某个标签的所有节点 //查询数 ...
- scrapy爬取网址，进而爬取详情页问题
1.最容易出现的问题是爬取到的url大多为相对路径,如果直接将爬取到的url进行二次爬取就会出现以下报错: raise ValueError('Missing scheme in request ur ...
- 安装crf++
在这里就不提心酸的安装过程了,就把成功安装及部分问题整理出来,以供参考: 安装环境:ubuntu14 1.安装ruby包 sudo apt-get install ruby2.安装zlib包 su ...
- ContextMune上下文菜单中，二级菜单获取及状态设置
ContextMune上下文菜单中,二级菜单获取及状态设置 在使用ContextMune上下文菜单中,能够通过二级菜单来获取及状态设置 //二级菜单获取和状态设置((ToolStripDropDown ...
- PID控制算法的C语音实现
http://wenku.baidu.com/link?url=_u7LmA1-gzG5H8DzFYsrbttaLdvhlHVn5L54pgxgUiyyJK_eWtX0LbS7d0SEbHtHzAoK ...
- 团队-Python 爬取豆瓣电影top250-成员简介及分工
姓名:周鑫 班级:软件6班 团队名称:咣咣踹电脑 擅长:Python,java 分工:编写数据库
- Django+Uwsgi+Nginx项目部署文档
一.基本环境搭建 1)查看服务器 [root@Myjumpserver ~]# cat /etc/sysconfig/selinux SELINUX=disabled SELINUXTYPE=targ ...
- Python之异常处理和socket套接字连接7
一.异常处理 1)异常处理的使用意义 什么是异常处理 异常是程序发生错误的信号,即程序一旦出错就会立刻产生一个异常,如果该异常没有被处理 那么异常就抛出来,程序的运行也随之终止 异常分为三部分: 异常 ...
- Servet-------JSTL标签库
JSTL标签库 也可以和EL表达式配合使用 作用: 提高在Jsp中的逻辑代码的编写效率,使用标签..(对EL表达式的扩展) 使用: JSTL的核心标签库(重点) JSTL的SQL标签库 JST ...