javascript - jQuery 选择器查找包含特定值 TD 输入框的 TR

好的，这看起来应该是一个简单的问题，但我无法找到答案。我有一个表单，它是从 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 的引用？如果我的代码是正确的，在通过代码设置值时，我需要做些什么不同的操作吗？

答案＃1

选择器 $ ('#MyTable tr:has(input[value="2014"])') 仅在 input 元素具有值为 2014 的硬编码 value 属性时才会生效。请参阅此示例。

如果你试图选择一个没有硬编码 value 属性的 input 元素，那么你可以过滤这些元素并返回 value 等于 2014 的 input 元素。根据你的需求，你可以监听 input 或 change 事件。

这里是示例

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

答案＃2

如果你使用一个纯 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 选择器运行得快得多。

然而，既然你说“当这些控件中的任意一个的值发生变化时……”，那么也许你正在使用 change 事件，所以你可以简单地获取事件派发的输入（监听器中的 this）并向上找到最近的行。