如何在包含50個文本框的表中獲取對當前文本框的引用？

Question

基本上我有50行的表，每行有2個TD。一個用於輸入，另一個用於標籤，一切都是動態的。

請參閱該圖像

困境 用戶在文本框中輸入一個數字（我怎麼知道哪一個，如果我不想遍歷所有的人？）和回車鍵的事件我調用一個javascript函數，檢查它是否有效並將相應的消息添加到下一個tds標籤。 如何知道沒有循環所有文本框的輸入引用，因爲我在每個文本框輸入的輸入函數上調用該函數？

Answer 1

以下鏈接的作品的形式，基於（有限的可用信息），但需要你處理驗證自己，明明：

function yourDefinedFunction(){ 
    // you need to handle the validating yourself, somehow. 
    return false; 
} 

/* binds the 'keypress' to the 'tr' elements, which 'listens' to see 
    if they take place on/in a 'td' element */ 
$('tbody tr').on('keypress', 'td', function(e){ 
    /* 'this' is the 'td' element, 
     'e.target' is the element within the 'td' that received the event 
    var cell = this, 
     target = e.target; 

    // if the key pressed is the enter key, *and* the target was the input, then: 
    if (e.which === 13 && target.tagName.toLowerCase() == 'input') { 

     // you determine whether the entry is valid, however you want: 
     var validity = yourDefinedFunction() || 'valid'; 

     // and set the text of the next 'td' element to reflect that validity: 
     $(cell).next('td').text(validity); 
    } 
}); 

JS Fiddle demo。

參考文獻：

• next()。
• on()。
• text()。

Answer 2

很難給不知道具體你要怎樣做一個很好的例子，但像這樣的工作：

$('tr > td:first > input').keyup(function(e) { 
    //jQuery object representing the input box the user typed into 
    var input_box = $(this); 

    //get which key was pressed 
    var key_pressed = e.which; 
}); 

Answer 3

使用「改變」事件的TextBox，如：先加class='myTextboxClass'添加到您的文本框標記。

$(mytableselector).on('change','.myTextboxClass', function(){ 
    var me = this; // the one that changed 
    $(this).val();//value of that textbox 
}); 

設置同級文本：

$(mytableselector).on('change','.myTextboxClass', function(){ 
    var me = this; // the one that changed 
    $(this).val();//value of that textbox 
    $(me).parent('td').next('td').html('Invalid entry'); 
}); 

Answer 4

$("selector for table").on("keyup", "input[type=\"text\"]", function(ev) { 
    if (ev.which !== 13) { 
     return; 
    } 

    alert($(this).value()); 
}); 

Example

Answer 5

如果使用上......事件，這將指向當前的輸入。 實施例：

<td> 
    <textarea onchange="foo(this)"> 
</td> 
<td> 
    Hello 
</td> 
... 
function (input) { 
    input.parentNode.nextSibling.innerHTML = input.value; 
} 

這個例子將在TD的值更改爲textarea的權利textarea的值。 （不是很健壯的代碼，但它只是一個例子。）

Answer 6

$("#tableID :text").keyup(function(e) { 
    if (e.which !== 13) { //check if the key pressed is Enter 
     return;   // if it is not, stop execution of code 
    } 
    var nextTD = $(this).closest('td').next(); 
    //your code goes after this line 
}); 

nextTD的聲明後，你可以插入你的代碼，你喜歡更新內容TD。

PS：我假設你的表是在例如下面

JSFiddle Example