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以上 ...
随机推荐
- SQL注入漏洞的原理
在平常生活中,我们登陆某网页,常常需要输入用户名和密码,点击登陆,即可登陆成功. 对于黑客来说,不需要用户名和密码,只输入 admin '— 也可以登陆成功. 黑客利用的这种漏洞就是SQL Injec ...
- egg 为企业级框架和应用而生， 阿里出品
https://eggjs.org/zh-cn/intro/ egg 是什么? egg 为企业级框架和应用而生,我们希望由 egg 孕育出更多上层框架,帮助开发团队和开发人员降低开发和维护成本. 设计 ...
- Yii2-设置和获取、删除Cookies空值分析（有代码）
Yii2-设置和获取,删除Cookies空值或值没有变化 原因: 1.不要使用相同的request url, 否则需要刷新才能获取值 可在不同的动作中设置和调用 2.不要在函数中使用exit来中止脚本 ...
- Luogu 3421 [POI2005]SKO-Knights - Exgcd
Description 给出一个骑士的 $N$种 中行走的方式 $(a_i, b_i)$, 可以使骑士的坐标$(-a,-b)$或$(+a,+b)$. 我们需要找出 第二个骑士的 两种行走方式 $(c_ ...
- Luogu 2577[ZJOI2005]午餐 - 动态规划
Solution 啊... 我太菜了唔 不看题解是不可能的, 这辈子都不可能的. 首先一个队伍中排队轮到某个人的时间是递增的, 又要加上吃饭时间, 所以只能使吃饭时间递减, 才能满足最优,于是以吃饭时 ...
- 事务 TRANSACTION
事务是数据库中一个但单独的执行单元(Unit),他通常由高级数据库操作语言(如SQL)或编程语言(如C++.Java)编写的用户程序的执行所引起.当在数据库中更改数据成功时,在事务中更改的数据便会提交 ...
- JDK8集合类源码解析 - HashMap
java为数据结构中的映射定义了一个接口java.util.Map,此接口主要有四个常用的实现类,分别是HashMap.Hashtable.LinkedHashMap和TreeMap HashMap ...
- oracle 替换字符 replace
替换字符: select replace('xxyyzz','zz','') from dual >> xxyy 同时替换多个字符: select replace(replace('x ...
- 697. Degree of an Array
static int wing=[]() { std::ios::sync_with_stdio(false); cin.tie(NULL); ; }(); class Solution { publ ...
- FS210（cortex-A8）移植MT7601无线WIFI模块
准备:ubuntu 12.04 板子内核:3.0.2 交叉编译器:arm-cortex_a8-linux-gnueabi-gcc 所需资源下载:https://pan.baidu.com/s/1yWA ...