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").html("<input type='text'/>");
于 2013-06-07T09:58:15.593 回答
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

一个解决方案可能是：

$('.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 
$('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 回答
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 回答