<!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. 解决 win 7 64 位 vs2010 调试silverlight项目无法加载，提示更新developer ,跟新报 消息 ID: 1517 已安装了 Silverlight 的 64 位版本

    出现上面的问题是我们安装的silverlight的版本和系统给的silverlight下载的版本冲突, 解决的方法是,首先卸载Silverlight runtime(也就是默认的silverlight ...

  2. c++文件中引用C代码

    下面提供一个比较完整的示例程序,一共有四个文件:main.cpp.test.c.test.h.test.hpp main.cpp #include "test.hpp" int m ...

  3. CURLOPT_RETURNTRANSFER

    curl_setopt($ch,CURLOPT_RETURNTRANSFER,);//设置返回值不直接输出,例如返回xml格式,会将xml原样输出

  4. Activiti任务认领

    Activiti任务认领 TaskService taskService; taskService.setAssignee(String taskId, String userId);taskServ ...

  5. 2016年3月31日_应化所群体Review

    Review目的: Phonegap的ble插件可以接收到设备发送的信息,但接收并在控制台显示的数据夏一鸣不知道是正确的数据,还是由于编码解码问题导致的乱码问题.此次Review要解决的问题即判断接收 ...

  6. SpringBoot定制修改Servlet容器

    1.如何修改Servlet容器的相关配置: 第一种:在application.properties中修改和server有关的配置(ServerProperties提供): server.port=80 ...

  7. canvas 实现微信小游戏

    var canvas = document.getElementById('canvas'); var cxt = canvas.getContext('2d'); var timer; var iS ...

  8. PHP字符串替换函数

    str_replace函数 描述:实现字符串替换,区分大小写 语法:mixed str_replace(mixed $search, mixed replace, mixed $subject, [i ...

  9. PHP递归函数

    递归函数(Recursive Function)是指直接或间接调用函数本身的函数 在每次调用自己时,必须是(在某种意义上)更接近 于解 必须有一个终止处理或计算的准则 function recursi ...

  10. UGUI图集

    Editor->Project Settings 下面有sprite packer的模式.Disabled表示不启用它,Enabled For Builds 表示只有打包的时候才会启用它,Alw ...