jquery在使用輸入鍵輸入文本輸入時動態添加帶有值的表格行

Question

好的..這是我的第一個問題。用JavaScript很新，所以希望我會很好地處理（交叉手指）...我有一個HTML代碼到這裏：

<table width="500" border="1"> 
    <tr> 
    <td>No.</td> 
    <td>Name</td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
</table> 
<br /> 
Enter Name: 
<input type="text" name="name" id="name" /> 

我想有我在輸入「輸入名稱的任何值「直接作爲一個新的行在HTML表中附加一個運行號（1,2,3等）在」否「列使用「Enter」鍵代替點擊按鈕。同時，「名稱」中的值將被清除並聚焦，以便爲下一個值入口做好準備。

Answer 1

Jeebison，

作爲新的JavaScript我打算這句話更像是一個教程比確切的答案。

首先要做的是 - 爲了實現這一目標需要採取哪些步驟？

1. 獲得輸入
2. 值檢測「ENTER」鍵按下
3. 插入新行
4. 行設置爲輸入的值

好了，現在我們已將每個問題都分解爲許多小任務。這使得在問題的每個小節中尋找答案變得更容易？

Next - 你知道JavaScript框架嗎？

在編寫JavaScript時，許多瀏覽器處理標準的不同部分，或者根本不支持某些部分。因此，完全用手寫javascript不僅麻煩，而且很難編寫跨瀏覽器。框架使開發變得更加簡單和清潔，因爲它們是爲了在所有瀏覽器中處理相同的功能而構建的。

http://jquery.com - 這是我的最愛，很容易使用，所以我會給你舉例說明。

好的，在編碼上。

首先，我們需要將框架鏈接到html頁面。如果它是一個小型網站，或者你在玩耍，我喜歡讓谷歌爲我託管jQuery。通常你可以下載它。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

實際添加代碼，使使用jQuery的，我們需要添加一些腳本標記，等待DOM（文檔對象模型），以準備在頁面上。

<script type="text/javascript"> 
$(document).ready(function() { 
    // do stuff when DOM is ready 
}); 
</script> 

現在我們需要選擇我們試圖從中獲取數據的元素。 jQuery選擇器是完美的。一個簡單的例子是通過其「id」屬性來獲取元素。

在輸入的情況下，我們將使用「名稱」。在選擇器中引用ID時，我們總是在前面加上＃。

$('#name').val() 

這會給我們輸入的值。現在再添加一行。

您的餐桌沒有ID，但讓我們給它一個。

<table id='numbers'> 

添加HTML該行

$('#numbers').append('<tr><td></td><td></td></tr>'); 

選擇我們剛纔添加的行的第一列，並添加數。

var rows = $('#numbers tr').length; 
$('#numbers tr:last td:first').html(rows); 

拷貝輸入的值，第二列

$('#numbers tr:last td:last').html($('#name').val()); 

刪除空輸入

$('#name').val(''); 

我們檢測擊鍵我們會監聽器連接到輸入和地點所有這些代碼裏面。

$('#name').on('keyup', function(e) { 
    var code = (e.keyCode ? e.keyCode : e.which); 
    if (code == 13) { 
     $('#numbers').append('<tr><td></td><td></td></tr>'); 
     var rowcount = $('#numbers tr').length; 
     $('#numbers tr:last td:first').html(rowcount); 
     $('#numbers tr:last td:last').html($('#name').val()); 
     $('#name').val('').focus(); 
    } 
}); 

這看起來不錯，除了$（「名」）是使多餘的選擇，放慢您的代碼和它連接到該對象的函數內部冗餘。我們可以用$（本），而不是$（「＃名稱」），它引用由

$('#name').on('keyup', function(e) { 

完成了初始選擇的偵聽器的內部，我們有 -

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#name').on('keyup', function(e) { 
    var code = (e.keyCode ? e.keyCode : e.which); 
    if (code == 13) { 
     $('#numbers').append('<tr><td></td><td></td></tr>'); 
     var rowcount = $('#numbers tr').length; 
     $('#numbers tr:last td:first').html(rowcount); 
     $('#numbers tr:last td:last').html($(this).val()); 
     $(this).val('').focus(); 
    } 
    }); 
}); 
</script> 

Answer 2

因爲這是非常簡單的代碼（你是新的），所以我會在這裏拋出一塊骨頭。試試這個jsFiddle example。

HTML

<table width="500" border="1"> 
    <tr> 
    <td>No.</td> 
    <td>Name</td> 
    </tr> 
</table> 
<br /> 
Enter Name: 
<input type="text" name="name" id="name" />​ 

jQuery的

var index = 1; 
$('input[name=name]').on('keyup', function(e) { 
    var code = (e.keyCode ? e.keyCode : e.which); 
    if (code == 13) { 
     $('table').append('<tr><td></td><td></td></tr>'); 
     $('table tr:last td:first').html(index); 
     $('table tr:last td:last').html($(this).val()); 
     $(this).focus().select(); 
     index++; 
    } 
});​ 

Answer 3

歡迎＃1。

如果您使用的是jQuery，請查看jQuery's API瞭解有關可用函數的詳細信息。你的具體問題似乎圍繞着事件 - 你可以瞭解更多關於here的信息。

總之，您需要綁定將結果委託給另一個控件的事件。我建議看看keyup函數。

我希望有幫助。

參考文獻：

• http://api.jquery.com/
• http://api.jquery.com/category/events/
• http://api.jquery.com/keyup/