jQuery 选择器查找包含具有特定值的 TD INPUT 的 TR答案

【问题标题】：jQuery selector to find TR that contains TD INPUT with specific valuejQuery 选择器查找包含具有特定值的 TD INPUT 的 TR
【发布时间】：2015-05-11 07:54:34
【问题描述】：

好吧，这似乎应该是一个简单的问题，但答案却让我难以捉摸。我有一个从 JSON 数据构建的表单，我从中构建了一个包含 3 行和 14 列的表，每列都包含一个 INPUT 文本控件。

当任何这些控件中的值发生变化时，我需要找到第一列中输入控件等于特定年份的包含行。

这是一个标记示例：

<table id="MyTable">
<tr>
    <td><input type="text" /></td>
    <td><input type="text" class="changeHandled"/></td>
    <td><input type="text" class="changeHandled" /></td>
</tr>
</table>

我尝试过的选择器是：#MyTable tr:has('input[value="{year}"]') 和几十个变体。

我将 {year} 字符串替换为我正在搜索的年份值，所以它最终看起来像：#MyTable tr:has('input[value="2014"]')

我相信这可能是因为这些值最初是通过代码设置的，因为如果我使用 #MyTable tr:has('input') 它会返回所有行。

由于可维护性，我不想硬编码路径，只需在 javascript 代码中说 $(this).closest("tr")...。

知道如何检索对包含具有特定值的输入的 TR 的引用吗？如果我的代码是正确的，我在通过代码设置值时是否需要做一些不同的事情？

【问题讨论】：

标签： javascript jquery html jquery-selectors

【解决方案1】：

选择器$('#MyTable tr:has(input[value="2014"])') 仅在input 元素具有硬编码的value 属性且值为2014 时才有效。见this example。

如果您尝试选择没有硬编码value 属性的input 元素，则可以过滤元素并返回值等于2014 的input 元素。根据您的需要，您可以收听input 或change 事件。

Example Here

$('#MyTable input').on('input change', function () {
    $tr = $('#MyTable tr input:first').filter(function () {
        return this.value === '2014' || $(this).attr('value') === '2014';
    }).closest('tr');
});

【讨论】：

这个问题是很久以前的问题了，我什至不记得我是如何解决它的，但是重新阅读它，您的解决方案实际上会起作用，所以我已将其标记为答案。

【解决方案2】：

虽然我同意 vanilla JS 会更有效，但我认为过滤太昂贵了？我会去监听更改事件并找到最近的行：

$( 'body' ).on( 'change', 'input[type="text"]', function(){
  var theRow = $( this ).closest( 'tr' );
  // Do what you need to with theRow
} );

【讨论】：

是的，但这不会在点击事件上触发，只是在文本输入发生更改时触发。或者他甚至可以在模糊中做到这一点。但是我不会遍历每个输入并在一个输入发生更改时检查其值 - 当只想更改/检查已更改输入的行时，这很昂贵且没有必要。

【解决方案3】：

如果您要使用计划 JS 解决方案，它可能如下所示：

function getRowByYear(year) {
  var table = document.getElementById('MyTable');
  var row, rows = table.rows;
  var input;

  for (var i=0, iLen=rows.length; i<iLen; i++) {
    input = rows[i].cells[0].getElementsByTagName('input')[0];

    if (input.value == year) {
      return rows[i];
    }
  }
}

并且可能会比 jQuery 选择器运行得更快。

但是，既然您说“当任何这些控件中的值发生变化时...... this 在侦听器中）并向上移动到最近的行。

【讨论】：