Question

最初当页面加载时，表格会正常显示，但是当我点击编辑标签时，它应该将第一个名称值作为文本框使其可编辑。我将输入值并点击输入它将提交表格。我真的很困惑如何实现这一点。

这是我的样本表，我不能超越这个。

<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

Answer 1

不要让事情复杂化。只需在文本框中添加另一个<td>标记，然后将其隐藏起来。然后添加一些绑定到标签上的jsvascript，用静态文本隐藏<td>并用文本框显示<td>。顺便说一下，你不需要标签，<span>就够了。

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

Answer 3

查看以下链接

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

Answer 4

您可以使用HTML5和javascript contentEditable事件的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");
   }

}

Answer 5

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

display: none

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

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

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

单击时创建文本框

5 个答案: