<!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-列表修改的更多相关文章

  1. Eclipse中js文件修改后浏览器不能及时更新的解决办法

    项目中js文件修改后浏览器不能及时更新的解决办法 转载:http://www.codeweblog.com/%E9%A1%B9%E7%9B%AE%E4%B8%ADjs%E6%96%87%E4%BB%B ...

  2. 昆仑游戏[JS加密修改]

    昆仑游戏:http://www.kunlun.com/index.html JS加密修改 BigTools=window.BigTools;//重点 RSAKeyPair=window.RSAKeyP ...

  3. 使用Js脚本 修改控制IE的注册表相关设置(activex等)

    使用Js脚本 修改控制IE的注册表相关设置(activex等) 分类: PHP2012-12-05 18:51 2035人阅读 评论(2) 收藏 举报 脚本写法: <SCRIPT LANGUAG ...

  4. JS列表的下拉菜单组件(仿美化控件select)

    JS列表的下拉菜单组件(仿美化控件select) 2014-01-23 23:51 by 龙恩0707, 1101 阅读, 6 评论, 收藏, 编辑 今天是农历23 也是小年,在这祝福大家新年快乐!今 ...

  5. 微信小程序 JS动态修改样式

    微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...

  6. diff.js 列表对比算法 源码分析

    diff.js列表对比算法 源码分析 npm上的代码可以查看 (https://www.npmjs.com/package/list-diff2) 源码如下: /** * * @param {Arra ...

  7. JS动态修改微信浏览器中的title

    JS动态修改微信浏览器中的title我们的原理是设置一个ifame然后我们再加载一下就可以实现了,具体的例子如下所示． 平时使用JS修改title,直接document.title=新标题就好了 这样 ...

  8. 使用CSS/JS代码修改博客模板plus

    之前对CSS/JavaScript了解还不深,只是把模板的CSS胡乱修改了几个属性.最近正好也在做一个网站的前端,学习了不少东西,再来改一改~ 上次最后之所以铩羽而归,是因为从CSS里找不到那些#和. ...

  9. 用JS查看修改CSS样式（cssText,attribute('style'),currentStyle,getComputedStyle）

    CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...

  10. Js 插件修改及优化总结

    1. ajaxfileupload 上传插件版本问题以及数据处理问题 参考链接: http://liwx2000.iteye.com/blog/1540321 现在大家至少也在用jquery1.9以上 ...

随机推荐

  1. andorid 单选与复选

    activity_ui1.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout x ...

  2. 839A Arya and Bran

    A. Arya and Bran time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  3. iOS.Animation.CAMediaTiming

    CAMediaTiming Protocol CALayre 和 CAAnimation 实现了CAMediaTiming 接口. CAMediaTiming 定义了8个属性. speed属性: Co ...

  4. Scrapy框架——CrawlSpider类爬虫案例

    Scrapy--CrawlSpider Scrapy框架中分两类爬虫,Spider类和CrawlSpider类. 此案例采用的是CrawlSpider类实现爬虫. 它是Spider的派生类,Spide ...

  5. 2015-09-27 git学习

    创建 初始化 git init Initialized empty Git repository in <file> 关联 git remote add origin <git@se ...

  6. Python GUI中 text框里实时输出

    首先GUI中不同函数的局部变量的问题. 发现不同button定义的函数得到的变量无法通用. 通过global 函数内的变量可以解决这个问题 def openfiles2(): global s2fna ...

  7. Pycharm的常用快捷将

    程序运行 Shift+alt+F10 执行程序 debug调试 Shift+alt+F9 Debug调试Shift + F9 对当前文件进行DebugF8 调试模式下 跳过F7 调试模式下 进入F9 ...

  8. 把dataset对象转换成list集合方法

    public static List<T> GetList<T>(DataTable table) where T:new() { List<T> list = n ...

  9. netsharp.weixin和sdk的配置信息管理

    一.微信公众号后台配置 即在微信公众号后台配置类似如下的url:http://121.40.86.55/wx?oid=gh_befcc6d4c40d 这种情况下会执行WeixinServlet类的do ...

  10. contenteditable设置元素可编辑

    需求背景 实现一个输入框,高度可以随着输入文字的增加而自动增高 有placeholder,输入为空时,显示placeholder 我们知道可以将div的contenteditable设置伪true,将 ...