Question

我找不到任何问题的解决方案，所以我在这里发布。我有

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

当我点击它时，我希望将这个“文本”转换为输入类型文本。我怎么能这样做？

Answer 1

点击即可使用.html()并替换$(this)。试试这个。

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

这是DEMO

Answer 2

你可以使用contenteditable

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

demo

这是 support

Answer 3

简单的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>

Answer 4

$('.something i').click(function() {
    $(this).replaceWith('<input type="text" value="' + $(this).text() + '">');
});

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

Answer 5

解决方案可能是：

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

Answer 6

你可以尝试

$('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/

Answer 7

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

Answer 8

试试这个

    <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>

Answer 9

    $('.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();
        }
    });

Answer 10

   $(".something").html("<input type='text'/>");

从文本创建输入类型

10 个答案: