4

新しい PHP myadmin を使用している場合は、フィールドをクリックして編集し、クリックして離すと div に戻ります。これは Web で簡単に見つけることができると思いましたが、明らかにそうではなかったので、作成しようとしました私はjavascriptがあまり得意ではないので、失敗しました。これまでに得たものは次のとおりです。

HTML:

<td id="td_1"><input type="hidden" value="0" />0</td>

Javaスクリプト:

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

テキストボックスを追加しますが、値を追加せず、元に戻す方法にこだわっています

助けてくれてありがとう:)

4

3 に答える 3

9

テキスト値をクリックすると表示される非表示のテキストボックスがあります。実施例

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
    });
});
于 2013-05-24T21:15:44.550 に答える
3

このフィドルを試してみてください。複数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>
于 2013-05-24T21:46:29.047 に答える
2 
$("#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();
});
于 2013-05-24T21:14:56.140 に答える