Javascript 单击创建文本框

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

这是我的样品表，我不能超出这个范围

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

编辑
名字：
约翰
姓氏：
赖特

---

​

查看以下链接

---

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

display: none

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

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

---

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

不要让事情复杂化。只需在文本框中添加另一个

标记并将其隐藏即可。然后添加一些绑定到单击标签的jsvascript，用静态文本隐藏

，用文本框显示

。 顺便说一句，这里不需要标签，

就足够了。

$（“#编辑”）。单击（函数（）{
$('#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;
    })
})

变量$table=$（'table'）；
if（$table.find（'input'）.length）返回；
$table.find（'td:nth child（2）'）.html（函数（i，v）{
返回“”；
})
})
$（'table'）。在（'blur'，'input'，function（）上{
$（‘表输入’）.replaceWith（函数（）{
返回此.value；
})
})

---

您可以使用HTML5和javascript

keyPress

事件提供的

contentEditable

支持来实现这一点。请尝试此链接

HTML

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

---

}

我试图添加

$（'#edit'）。在（“click”，function（）{$（''）.attr（{id:'firstName'}）；alert（“jwsd”）；}）；

在td元素中，但不知道如何将其附加到表中我支持IE 6,7,8。我假设HTML5在那些浏览器中不起作用。代码中有一个bug，如果你一直点击编辑按钮，它会在文本末尾添加

box@user525146这里是的，我已经在小提琴中添加了一个if语句，我会更新它。就像一个魅力，完美！非常感谢。我在代码中发现了一个bug，以前没有注意到。当我更改值并单击某处时，返回此值。保留编辑后的值，而不是以前的值。@Shivandam更新了链接

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