單擊時創建文本框

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>

提琴手

Answer 1

不要把事情復雜化。 只需在文本框中添加另一個<td>標記並將其隱藏即可。 然后添加一些綁定到單擊標簽的 jsvascript，用靜態文本隱藏<td>並用文本框顯示<td> 。 順便說一句，這里不需要標簽， <span>就足夠了。

Answer 2

查看以下鏈接

如何使用 Javascript 動態創建 TextBox 並讀取隱藏代碼中的控件值

Answer 3

$('#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 4

您可以使用 HTML5 的contentEditable支持和 javascript keyPress event 來做到這一點。 請嘗試此鏈接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 比僅僅顯示和隱藏文本框更困難，更難維護。