1

問題の解決策が見つからなかったので、ここに投稿します。私は持っている

<td class="something"><i>some text</i></td>

そして、この「いくつかのテキスト」をクリックして入力タイプのテキストに変えたいと思います。これどうやってするの？

4

10 に答える 10

3

.html()クリックして置き換えるだけで使用できます$(this)。これを試してみてください。

$(".something").click(function(){
   $(this).html("<input type='text'/>");
});

デモはこちら

于 2013-06-07T08:31:31.427 に答える
2

contenteditable を使用できます

<td class="something"><i contenteditable>some text</i></td>

demo

そして、これがsupport

于 2013-06-07T08:33:53.553 に答える
1

シンプルな JavaScript、JQuery なし

 <i onclick="javascript:f(this);">some text</i>
        <script type="text/javascript" language="javascript">
            function f(i) {
            i.innerHTML = "<input type=\"text\" value=\"" + i.innerHTML + "\" \/>";
        }
        </script>
于 2013-06-07T08:46:52.467 に答える
0 
    $('.something').on('click', function(e) { // Rename node
        var $this = $(this);
        var length = $this.children().text().length;
        var input = $('<input />', { 'type': 'text', 'value': $this.children().text(), 'data-old': $this.text() });
        $this.parent().append(input);
        $this.remove();
        input.attr('size', length).focus();
    }).on('blur', function(e) { // Save on blur
        var $this = $(this);
        var value = $this.val();
        var oldValue = $this.attr('data-old');
        $.post('YOUR URL', function (data) { // save the input data
            if (data.success) {
                $this.parent().append('<td class="something"><i contenteditable>' + value + '</i></td>'); // save successful
            } else {
                $this.parent().append('<td class="something"><i contenteditable>' + oldValue + '</i></td>'); // save error, use old value
            }
            $this.remove();
        });
    }).on('keyup', function(e) { 
        if (e.keyCode == 13) { // Enter key - trigger blur (save)
            $(this)[0].blur();
        } else if (e.keyCode == 27) { // Escape key - cancel, reset value
            var $this = $(this);
            $this.parent().append('<td class="something"><i contenteditable>' + $this.attr('data-old') + '</i></td>');
            $this.remove();
        }
    });
于 2013-06-07T08:40:57.920 に答える
0

解決策は次のとおりです。

$('.something').click(function() {
    $(this).html('<input type="text" name="myname" />');
});
于 2013-06-07T08:34:56.200 に答える
0

あなたが試すことができます

$('td.something').on('click',function(){
    $(this).html('<input type="text" name="name" />');
});

入力テキストで td の値を取得する場合は、次のようにします。

$('td.something').on('click',function(){
    $this = $(this);
    $this.html('<input type="text" name="name" value="'+$this.text()+'" />');
});

ここにフィドルがあります：http://jsfiddle.net/vDktG/

于 2013-06-07T08:35:14.517 に答える
0 
$('.something i').click(function() {
    $(this).replaceWith('<input type="text" value="' + $(this).text() + '">');
});

http://jsfiddle.net/dfsq/NhgCN/1/

于 2013-06-07T08:33:39.180 に答える
0 
$('td.something i').on('click', function() {//bind event to <i> tag
  this.prevHTML = $(this).html(); //can roll back if user cancels.
  this.innerHTML = '<input>'; //input with no type specified defaults to text input
});
于 2013-06-07T08:35:43.403 に答える
0

これを試して

    <td class="something"><i onclick="turnIntoText(this)">some text</i></td>
<script type="text/javascript">
    function turnIntoText(args) {
        $(args).replaceWith('<input type="text" value="'+$(args).html()+'" />');
    }
    //        or
    //        function turnIntoText(args) {
    //            $(args).replaceWith('<input type="text" />');
    //        }
</script>
于 2013-06-07T08:36:19.753 に答える