jQuery选择器，用于查找包含具有特定值的TD输入的TR

jQuery selector to find TR that contains TD INPUT with specific value

本文关键字：TD TR 输入 选择器 用于 查找 包含具 jQuery      更新时间：2023-09-26

好吧，这似乎应该是一个简单的问题，但答案让我无法回答。 我有一个从 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 的引用吗？ 如果我的代码正确，在通过代码设置值时是否需要执行其他操作？

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

如果尝试选择没有硬编码value属性的input元素，则可以筛选这些元素并返回值等于 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');
});

如果要使用计划 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 事件，因此您可以简单地获取从中调度事件的输入（在侦听器中），然后转到最近的行。

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

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