Question

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

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

以下是标记示例：

<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的引用吗？如果我的代码是正确的，那么在通过代码设置值时我是否需要做一些不同的事情？

Answer 1

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

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

Example Here

change

Answer 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选择器运行得快得多。

但是，因为您说＆＃34; 当任何控件中的值发生变化时...... ＆＃34;那么也许您正在使用更改事件，因此您只需获取调度事件的输入（此在侦听器中）并转到最近的行。

Answer 3

虽然我同意vanilla JS会更有效率，但我觉得过滤太贵了？我会去听取改变事件并找到最近的一行：

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

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

3 个答案: