-1

基本上我有 50 行的表，每行有 2 个 td。一个用于输入，下一个有标签，一切都是动态的。

参考这张图片 在此处输入图像描述

困境 用户在文本框中输入一个数字（如果我不想遍历所有数字，我怎么知道哪个数字？）并且在输入键事件时我调用一个javascript函数来检查它是否有效并将相应的消息添加到下一个tds 标签。当我在每个文本框输入的输入函数上调用该函数时，如何知道输入的引用而不遍历所有文本框？

4

6 回答 6

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 小提琴演示。

参考：

于 2013-05-13T19:46:37.253 回答
0 
$("selector for table").on("keyup", "input[type=\"text\"]", function(ev) {
    if (ev.which !== 13) {
        return;
    }

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

例子

于 2013-05-13T18:40:34.727 回答
0

如果不具体知道您要做什么，很难举一个很好的例子，但是这样的事情会起作用：

$('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;
});
于 2013-05-13T18:38:58.270 回答
0

对文本框使用“更改”事件，例如：首先将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');
});
于 2013-05-13T18:39:11.757 回答
0

如果您使用 on... 事件，这将指向当前输入。例子：

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

这个例子会将文本区域右侧的 td 的值更改为文本区域的值。（不是很健壮的代码，但这只是一个例子。）

于 2013-05-13T18:48:00.447 回答
0 
$("#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 示例

于 2013-05-13T19:25:10.340 回答