Question

我有一个＆＃34;网格＆＃34;每行有几个输入字段。让我们说每个输入字段代表一周中的某一天。

HTML：

<table id="grid">
    <tr>
        <td><input class="fri" type="text" value="foo" /></td>
        <td><input class="mon" type="text" value="bar" /></td>
        <td><input class="tue" type="text" value="baz" /></td>
        <td><input class="wed" type="text" value="x" /></td>
        <td><input class="thu" type="text" value="y" /></td>
    </tr>
    ...

jQuery的：

$('#grid').on('change', '.fri', function () {
    var value = $(this).val();
    //do something
});

$('#grid').on('change', '.mon', function () {
    var value = $(this).val();
    //do something
});

// And so on...

可以有任意数量的行，所有行都具有相同的字段。

我做了fiddle我正在尝试做的事情。

然而，我觉得我重复自己有点过多（使用jQuery），我想知道是否有办法更简洁地完成上述操作（最好使用jQuery）。

Answer 1

您可以使用元素选择器而不是使用单个ID，然后绑定它们：

$('#grid').on('change', 'input:text', function () {
   var value = $(this).val();
   //do something
});

此外，如果您在同一个表格中有其他文本框，而您不想定位，则使用多个类选择器：

$('#grid').on('change', '.fri,.mon,.tue', function () {
  var value = $(this).val();
  //do something
});

Answer 2

您可以像这样使用event.target：

$('#grid').on('change', function (e) {
    alert(e.target.value);
});

这将是您需要的唯一jQuery。

每行有多个输入字段的网格

2 个答案: