单击时创建文本框答案

【问题标题】：Create text box on click单击时创建文本框
【发布时间】：2020-09-15 10:28:09
【问题描述】：

最初，当页面加载时，表格将正常显示，但是当我单击编辑标签时，它应该将名字值设为文本框以使其可编辑。我将输入值并按回车键将提交表单。我真的很困惑如何实现这一目标。

这是我的示例表，我无法超越。

<label id="edit" style="cursor:pointer; color:blue;">edit</label>

<table>
    <tr><td>First Name: </td>
        <td>John</td>
    </tr>
    <tr><td>Last Name: </td>
        <td>Wright</td>
    </tr>
</table>

jsfiddle

【问题讨论】：

我尝试在 td 元素中添加<SCRIPT> $('#edit').on("click", function() { $('<input type="text" />').attr({id: 'firstName' });alert("jwsd");}); </SCRIPT> 但不明白如何将其附加到表格

标签： javascript jquery html-table textbox

【解决方案1】：

不要把事情复杂化。只需添加另一个 <td> 带有文本框的标签并将其隐藏即可。然后添加一些绑定到单击标签的jsvascript，用静态文本隐藏<td>，并用文本框显示<td>。顺便说一句，这里不需要标签，<span> 就足够了。

【讨论】：

【解决方案2】：

$('#edit').click(function() {
    var $table = $('table');
    if ($table.find('input').length) return;
    $table.find('td:nth-child(2)').html(function(i, v) {
        return '<input value=' + v + '>';
    })
})

$('table').on('blur', 'input', function() {
    $('table input').replaceWith(function() {
        return this.value;
    })
})

http://jsfiddle.net/cnuDh/

【讨论】：

代码中有一个bug，如果你继续点击编辑按钮，它会在文本框中添加<input，在文本框末尾添加>>
@user525146 这里是的，我在fiddle中添加了一个if语句，我会更新它。
像魅力一样工作，完美！非常感谢
我在代码中发现了一个错误，以前没有注意到。当我更改值并单击某处时，return this.value 会保留编辑后的值而不是以前的值。

【解决方案3】：

查看以下链接

How To Create TextBox Dynamically using Javascript and Read Control Value In Code Behind

【讨论】：

@Shivanandam 更新了链接

【解决方案4】：

您可以使用来自 HTML5 的 contentEditable 支持和 javascript keyPress 事件来执行此操作。请试试这个链接http://jsfiddle.net/rdRWC/8/。

HTML

<div id="edit" style="border:1px solid #ccc" contenteditable="true" onkeypress="submitForm(event,this)">edit</div>

JS

   function submitForm(e , t){
    var keyPressed = e.which;
if(e.which == 13){  //Pressed Enter Key
      alert("Do your Form Submittion Here");
   }

}

【讨论】：

我支持 IE 6,7,8。我假设 HTML5 在这些浏览器中不起作用。

【解决方案5】：

您应该使用 CSS 隐藏文本框，而不是在用户单击时创建文本框

display: none

然后，当用户点击时，只需调用：

$('#textboxid').show();

我不鼓励动态创建文本框的原因是因为创建 HTML 比仅仅显示和隐藏文本框更难，更难维护。

【讨论】：