js处理table,双击可填写，光标离开不可写

最新推荐文章于 2024-04-20 09:42:05 发布

zsf0615020117

最新推荐文章于 2024-04-20 09:42:05 发布

阅读量1.3k

点赞数

分类专栏： JS 文章标签： table javascript function border input html

本文链接：https://blog.csdn.net/zsf0615020117/article/details/7702669

版权

JS 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

闲来没事，写一个小例子。

在备注一栏，刚开始不可修改，双击备注栏，信息即可修改，光标离开之后，信息又处于不可修改状态。

<html>

<head>
</head>
<body>
<table border="1" ondblclick ="javascript:getResorce(event);">
<tr><td>姓名</td><td>年龄</td><td>备注</td></tr>
<tr><td>张三</td><td>20</td><td><input type="text" value="我很年轻" readOnly οnblur="javascript:leave(this);"></td></tr>
<tr><td>李四</td><td>21</td><td><input type="text" value="我比较年轻" readOnly οnblur="javascript:leave(this);"></td></tr>
<tr><td>王五</td><td>18</td><td><input type="text" value="我最年轻" readOnly οnblur="javascript:leave(this);"></td></tr>
</table>
</body>
</html>
<script type="text/javascript">
//为了兼容IE和火狐，将事件作为参数进行传递
function getResorce(event){
   var obj = event.srcElement?event.srcElement:event.target;
   //获得事件源的html元素名称
   //alert(obj.tagName);
   if(obj.tagName == 'INPUT'){
      //alert(obj.value);
      obj.readOnly = false;
   }
}
function leave(obj){
   obj.readOnly = true;
}
</script>

zsf0615020117

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js处理table,双击可填写，光标离开不可写

闲来没事，写一个小例子。在备注一栏，刚开始不可修改，双击备注栏，信息即可修改，光标离开之后，信息又处于不可修改状态。姓名年龄备注张三20李四21王五18//为了兼容IE和火狐，将事件作为参数进行传递function getResorce(event){ var obj = event.srcElement?event.sr
复制链接

扫一扫

专栏目录