就类似编辑资料的,都是输入框,点击编辑可以编辑输入框内的内容,点击保存输入框消失
6条回答
- Go 旅城通票 2015-11-09 09:18关注
自己做个样式不显示控件input的边框就好了,默认readonly不允许编辑。点击编辑的时候加上边框样式,去掉readonly属性
<style>.readonly input{border:none}</style> <div id="dvInput" class="readonly"> text1:<input type="text" readonly value="text1" /><br /> text2:<input type="text" readonly value="text2" /><br /> </div> <input type="button" value="编辑" onclick="btnClick(this)" /> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script> <script> function btnClick(btn) { var toEdit = btn.value == '编辑'; $('#dvInput')[toEdit ? 'removeClass' : 'addClass']('readonly').find(':input').attr('readonly', toEdit ? false : true); btn.value = toEdit ? '保存' : '编辑'; if (!toEdit) {//保存的ajax代码 //.. } } </script>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报