</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的效果。