<!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. hdu 2444(二分图) The Accomodation of Students

    http://acm.hdu.edu.cn/showproblem.php?pid=2444 大意是给定n个学生,他们之间可能互相认识,首先判断能不能将这些学生分为两组,使组内学生不认识: 现想将学生 ...

  2. Java中方法的重写

    ★★前提:方法的重写建立在继承关系上★★ 在Java程序中,类的继承关系可以产生一个子类,子类继承父类,它具备了父类所有的特征,继承了父类所有的方法和变量. 所谓方法的重写是指子类中的方法与父类中继承 ...

  3. 20172306《java程序设计与数据结构》第六周学习总结

    20172306<Java程序设计>第六周学习总结 教材学习内容总结 第八章关键学习了数组的相关内容.我觉得主要分一下几点: 1.索引是从0开始,要区分好索引值和个数值.0的索引处是第一个 ...

  4. python 字典遍历

    dic1={"name":"kxb","age":28}for k,v in dic1.items(): print(k+",,, ...

  5. PDF下载网

    http://www.java1234.com/a/javabook/javaweb/2018/1103/12297.html

  6. .net从网络接口地址获取json，然后解析成对象（一）

    整理代码,今天遇到一个问题,就是从一个场景接口获取json,然后解析成对象.之前的时候都好好的,这次返回的json字符串里,由于字符编码的问题,格式上不能转换.一直以为是解析的过程编码有误,试了utf ...

  7. Delegate,Action,Func,匿名方法,匿名委托,事件 (转载)

    Delegate,Action,Func,匿名方法,匿名委托,事件 (转载) 一.委托Delegate 一般的方法(Method)中,我们的参数总是string,int,DateTime...这些基本 ...

  8. Eclipse编辑XML自动提示（zz）

    Eclipse编辑XML自动提示 博客分类: j2se XMLEclipseiBATISSpringSQL  IED Eclipse Java EE IDE for Web Developers: D ...

  9. javascript的use strict(使用严格模式)

    上一篇博文学习变量声明带var和不带的区别.搜索相关的文章. 引出了另一个概念. "use strict" 使用严格模式 对于一个使用者而不是概念研究者,我觉得没有意义争论或者讨论 ...

  10. SQL 创建联合主键Table

    CREATE TABLE [User_Instance]( [IntanceID] [int] NOT NULL, ) NOT NULL ) ON [PRIMARY] GO SET ANSI_PADD ...