[英]Bootstrap Jquery/Ajax Inline Edit when clicking Edit button
Can some one suggest me an inline edit were when I click on the edit button my label content should be replaced with an input text and I would be able to update it in my mysql db. 有人可以建议我进行内联编辑吗?当我单击“编辑”按钮时,标签内容应替换为输入文本,并且可以在mysql数据库中对其进行更新。
My code: 我的代码:
<label style="display:block;">mylabel</label>
<input type="text" style="display:none;">myinput</input>
<button>edit</button>
Any help would be appreciated Thanks!! 任何帮助将不胜感激谢谢!
I would probably just use contentEditable, if possible. 如果可能的话,我可能只会使用contentEditable。
document.addEventListener('DOMContentLoaded', function(){ var btn = document.getElementById("editButton"); btn.addEventListener("click", function(){ var editLabel = document.getElementById("editLabel"); editLabel.contentEditable = true; editLabel.className = "editActive"; }); });
#editLabel{ margin-bottom: 25px; display: inline-block; padding: 5px; box-sizing: border-box; } #editButton{ display: block; } .editActive{ border: 1px inset #e3e3e3; cursor: text; }
<label id="editLabel">Hello World</label> <button id="editButton">Edit Label</button>
I wouldn't recommend doing it inline. 我不建议内联进行。 As you can see the result will not be clean.
如您所见,结果将不干净。 This will work though.
这将起作用。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <label style="display:block;">mylabel</label> <input type="text" style="display:none;" value="myInput"> <button onclick="$('label').text($('input').val())">edit</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.