點擊創建文本框

最初當頁面加載時，表格會正常顯示，但是當我點擊編輯標籤時，它應該使文本框的名字值爲可編輯。我將輸入值並按回車鍵將提交表單。我真的很困惑如何實現這一點。點擊創建文本框

這是我有的示例表，我無法超越這個。

<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

來源

2013-01-04 user525146

我嘗試添加''在td元素中，但不知道如何附加到表 – user525146

$('#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-04 18:08:44 undefined

代碼中存在一個錯誤，如果你繼續點擊編輯按鈕，它會在文本框中添加'> '在文本框末尾 – user525146

@ user525146這裏是的，我在小提琴中添加了一條if語句，我會更新它。 – undefined

工程就像一個魅力，完美！非常感謝您 – user525146

請查看以下鏈接

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

來源

2013-01-04 18:05:15

而不是創建一個文本框，當用戶點擊，你應該有文本框中使用隱藏CSS

display: none

然後，當用戶點擊，只要致電：

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

爲何我勸阻創建一個文本框，動態是因爲創建HTML是比較困難的，更難以維持不僅僅是顯示和隱藏文本框的原因。

來源

2013-01-04 18:05:40 Samuel

不要讓事情複雜化。只需添加另一個<td>標籤文本框並將其隱藏。然後添加一些綁定點擊標籤的jsvascript，用靜態文本隱藏<td>，並用文本框顯示<td>。順便說一句，你不需要標籤在這裏，<span>就夠了。

來源

2013-01-04 18:06:46 vyakhir

你可以從HTML5和JavaScript keyPress情況下，本使用contentEditable支持。請嘗試此鏈接http://jsfiddle.net/rdRWC/8/。

HTML

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

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

}

來源

2013-01-04 18:12:39 kannanrbk

我支持IE 6,7,8。我假設HTML5在這些瀏覽器中不起作用。 – user525146

點擊創建文本框

回答

相關問題