<!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. 20172306《Java程序设计与数据结构》第十周学习总结

    20172306<Java程序设计>第十周学习总结 教材学习内容总结 本章主要的讲的是集合有关的知识: 1.集合与数据结构 - 集合是一种对象,集合表示一个专用于保存元素的对象,并该对象还 ...

  2. Spring 是如何解析泛型 - ResolvalbeType

    Spring 是如何解析泛型 - ResolvalbeType Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) Java ...

  3. sqli-labs：7，导入导出；8-10 延时注入

    1,Load_file()导出文件 使用条件: A.必须有权限读取并且文件必须完全可读(and (select count(*) from mysql.user)>0/* 如果结果返回正常,说明 ...

  4. [ES]ES查询指南

    我们通常用用_cat API检测集群是否健康. 确保9200端口号可用: curl 'localhost:9200/_cat/health?v' 绿色表示一切正常, 黄色表示所有的数据可用但是部分副本 ...

  5. boost timer代码学习笔记

    socket连接中需要判断超时 所以这几天看了看boost中计时器的文档和示例 一共有五个例子 从简单的同步等待到异步调用超时处理 先看第一个例子 // timer1.cpp: 定义控制台应用程序的入 ...

  6. sublime使用技巧

    引用自:https://www.cnblogs.com/xiayuhao/p/9000216.html https://www.cnblogs.com/ma-dongdong/p/7653231.ht ...

  7. Linux 在文档中查找满足条件的行并输出到文件：

    Linux 在文档中查找满足条件的行并输出到文件: 文件名称: dlog.log    输出文件: out.log 1.满足一个条件(包含  “TJ”  )的语句: grep  “TJ”  dlog. ...

  8. 2019.02.07 bzoj4316: 小C的独立集（仙人掌+树形dp）

    传送门 题意:给出一个仙人掌森林求其最大独立集. 思路:如果没有环可以用经典的树形dpdpdp解决. fi,0/1f_{i,0/1}fi,0/1​表示第iii个点不选/选的最大独立集. 然后fi,0+ ...

  9. MYSQL 事务测试

    mysql 事务测试 创建张表 lock1 增加字段 id,name . 增加两条记录 1,a 2,b 启动第一个会话 BEGIN; update lock1 set name='c' where i ...

  10. react native的注释

    在react native 中是这样写注释的: {/*这里是注释*/}