实现可编辑的表格

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 65 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wannasing/archive/2013/06/05/3118287.html

文章标签：

#javascript #ViewUI

</head>
<style type="text/css">
.nobortext { border: 0; }
.bortext { border: 1px solid #000;}
</style>
<body>
<div><input type="" readonly="readonly" value="0202" id="t" /><span  onclick="change('t')">试试</a></span>
</body>
<script type="text/javascript">
function change(id){
    var o=document.getElementById(id);
    o.focus();
    o.removeAttribute("readonly");
    o.className="bortext";
    return false;
}
</script>
</html>

注上：这种方法的思路还是蛮巧妙的，先让一个文本框只读，然后点击的时候让它变的可读，从而实现可编辑的功能

<script>
        $(function(){
            $("#table").find("input[type='text']").on({
                focus : function(){
                    $(this).css('border','1px solid #f00');
                },
                blur : function(){
                    $(this).removeAttr('style');
                }
            })
        })
</script>

注上：伪实现的方法，这里是css是内联添加的，所以可以用removeAttr--style的方式达到removeClass的效果。

转载于:https://www.cnblogs.com/wannasing/archive/2013/06/05/3118287.html