Question

如果你使用过新的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();
});

它添加了文本框，但没有为其添加值，并坚持如何将其更改回来

感谢您的帮助：）

Answer 1

当您单击文本值时，我会显示一个隐藏的文本框。的 Working example

<强> 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 }); });

Answer 2

试试this fiddle，它适用于多个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>

Answer 3

$("#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();
});

Jquery div to textbox onclick并返回div

3 个答案: