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

使用文本框的“更改”事件，例如：首先将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

如果使用on ...事件，则会指向当前输入。 例如：

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

此示例将textarea右侧的td值更改为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内容。

P.s。：我假设您的表格是以下链接的示例的形式

JSFiddle Example