如何使用jQuery（或香草JS）在標簽上創建新輸入

Question

像許多事情一樣，最好用一張圖片來解釋我的問題： http : //gyazo.com/f7df971c91a5ab4a4969d12f4c5f32b6.png?1329575807

當用戶位於每一列的最后一個字段時，我希望在他們按下Tab鍵時在當前輸入下方彈出一個新輸入（類似於Quizlet所做的事情）。

我在jQuery方面沒有太多經驗，有人可以幫我一下，還是向我指出正確的方向？

編輯：所以這是我目前所擁有的：

$(document).ready(function(){
$('section#attendance input:last').keydown(function(e) {
    if (e.which == 9)
    {
        var $this = $(this);
        var num = parseInt($this.attr('name').match(/\d+(,\d+)?/)[0]) + 1;
        $this.parent().append('<input type="text" name="attendance[' + num +']" value="Name and Position" class="medium" />');
    }
});

}）;

由於某種原因，在創建第一個新輸入后，它不會將新輸入用作選項卡觸發器，而是將其先前使用的輸入使用。 知道為什么嗎？

Answer 1

$('input[type="text"]:last').live('keyup',
    function(e) {
        if (e.which == 9) {
            $(this).parent().append($('<input/>', {
                value: '',
                type: 'text',
                            name: 'YOUR_CHOICE',
                            class: 'YOUR_CHOICE'
            }));
        }
    });

Answer 2

假設您在某個容器中有column字段（例如'column'div），並且這些字段具有class field ，而last字段具有last類，那么這可能會有所幫助：

$('.last').live('focusout', function() {
  var $this = $(this);
  $this.removeClass('last');
  $this.parent().append('<input class="field last" type="text"></input>');
});

當然，您可以添加比這還漂亮的東西;）

Answer 3

function KeyDown(e) {
    if (e.which == 9) { // tab
        // Do your stuff
    }
}

$(document).keydown(KeyDown);

在您的情況下，您可能不希望綁定到document，而是最后一個元素。 或者，您可以在處理程序方法中進行焦點檢查。