javascript-JS 點擊編輯按鈕，顯示input邊框，可編輯，點擊保存按鈕，輸入框消失，不可編輯

JS 點擊編輯按鈕，顯示input邊框，可編輯，點擊保存按鈕，輸入框消失，不可編輯

就類似編輯資料的，都是輸入框，點擊編輯可以編輯輸入框內的內容，點擊保存輸入框消失

最佳回答：

自己做個樣式不顯示控件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>