如何在包含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