[英]Jquery div to textbox onclick and back to div
如果你已經使用新的PHP myadmin,你可以點擊一個字段然后編輯它,然后當你點擊它時它變回一個div,我認為這可以在網上輕松找到但是顯然不是,所以我試着去做而且我對javascript不是很好,所以我失敗了。 這是我到目前為止所得到的。
HTML:
<td id="td_1"><input type="hidden" value="0" />0</td>
javascipt的:
$("#td_1").click(function() {
$input = $("#td_1");
$field = $('<input type="text" id="txt_1" maxlength="1" size="1"/>').attr({
id: $input.id,
name: $input.name,
value: $input.val()
});
$input.after($field).remove();
});
它添加了文本框但不添加值,並堅持如何更改它
謝謝你的幫助 :)
當您單擊文本值時,我會顯示一個隱藏的文本框。 工作實例
HTML
<td id="td_1"><input id="txtBox" type="textbox" value="0" style="display:none;" /><span id="txtBoxValue">0</span></td>
jQuery的
$(function() {
$('#txtBoxValue').on('click', function() {
$(this).hide(); //hide text
$('#txtBox').show(); //show textbox
});
$('#txtBox').on('blur', function() {
var that = $(this);
$('#txtBoxValue').text(that.val()).show(); //updated text value and show text
that.hide(); //hide textbox
});
});
嘗試這個小提琴 ,它適用於多個span
和input
。
<div class="editDIV">
<span class="editESPAN" style="display:block;">asd</span>
<input class="editINPUT" style="display:none;" type="text"/>
</div>
<div class="editDIV">
<span class="editESPAN" style="display:block;">asd</span>
<input class="editINPUT" style="display:none;" type="text"/>
</div>
<script type="text/javascript">
$(document).ready(function () {
$(".editDIV").click(function(){
$(this).find("span")[0].style.display="none";
$(this).find("input")[0].style.display="block";
$(this).find("input")[0].focus();
});
$(".editINPUT").blur(function(){
$(this)[0].style.display="none";
$(this).prev()[0].innerText=$(this)[0].value;
$(this).prev().show();
});
});
</script>
$("#td_1").click(function() {
$input = $("#td_1");
$field = $('<input type="text" id="txt_1" maxlength="1" size="1"/>').attr({
id: $input.id,
name: $input.name,
value: $input.text()
});
$input.after($field).remove();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.