Question

让我们看一下输入和按钮表：

<tr>
  <td>
    <input type=\"number\" name=\"name1\">
  </td>
  <td>
    <button type=\"button\" class=\"button\">Button</button>
  </td>
</tr>
<tr>

表格较大，包含许多与上述结构相同的行。

如何使用jquery获取点击按钮旁边的输入值？

我可以使用

访问该字段

$(document).on('click', '.button', function() {
    $(this).parent().prev() // this is the input type
});

但是在其上调用.val()并不起作用。

Answer 1

如果你有一张大桌子并且你将要做很多事情，我建议使用HTML5 data attributes将按钮与输入字段链接：

<tr>
  <td>
    <input id="input-1" type=\"number\" name=\"name1\">
  </td>
  <td>
    <button data-input=\"#input-1\"type=\"button\" class=\"button\">Button</button>
  </td>
</tr>
<tr>

请注意，输入上的id属性与按钮上的data-input属性相匹配。现在你可以这样做：

$('button').on('click', function() {
    var input = $(this).data('input');
    var value = $(input).val();

    // Do something with the value
});

更新

如果关系不是一对一的，则必须稍微修改结构。您无法使用id属性，因为ID必须是唯一的。相反，您可以为每个输入提供数据属性，例如：

<input data-group="1" type=\"number\" name=\"name1\">

您的按钮将具有相应的数据属性：

<button data-input=\"1\"type=\"button\" class=\"button\">Button</button>

然后在你的点击处理程序中，你可以这样做：

$('button').on('click', function() {
    var input_group = $(this).data('input');
    var inputs = $('input[data-group="' + input_group + '"]');
    var values = [];

    // Read the values into an array
    $.each(inputs, function(i, input) {
        values.push(input.val());
    });

    // Do something with the values...
});

按钮点击后获取输入字段的值

1 个答案:

更新