jQuery選擇器，用於查找包含具有特定值的TD INPUT的TR

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元素具有值為2014的硬編碼value屬性時才有效。 看這個例子 。

如果您嘗試選擇沒有硬編碼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');
});

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選擇器運行得快得多。

但是，既然你說“ 當任何一個控件中的值發生變化...... ”那么你可能正在使用一個更改事件，所以你可以簡單地獲取調度事件的輸入（ 這在偵聽器中）並轉到最近的一排。

Answer 3

雖然我同意vanilla JS會更有效率，但我覺得過濾太貴了？ 我會去聽取更改事件並找到最近的行：

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