2

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

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

<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

​</p>

4

5 回答 5

4

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

于 2013-01-04T18:06:46.697 回答
2

查看以下链接

如何使用 Javascript 动态创建文本框并在后面的代码中读取控件值

于 2013-01-04T18:05:15.857 回答
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/

于 2013-01-04T18:08:44.227 回答
1

您可以使用contentEditableHTML5 和 javascriptkeyPress事件的支持来做到这一点。请尝试此链接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");
   }

}

于 2013-01-04T18:12:39.727 回答
0

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

display: none

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

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

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

于 2013-01-04T18:05:40.987 回答