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

Question

Ok, this seems like it should be a simple question, but the answer eludes me. I have a form that is built from JSON data from which I build a table of 3 rows and 14 columns each containing an INPUT text control.

When the value in any of those controls changes I need to find the containing row whose input control in the first column equals a specific year.

Here is a sample of the markup:

<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>

The selector I've tried is: #MyTable tr:has('input[value="{year}"]') and a few dozen variations.

I replace the {year} string with the year value I'm searching for, so it ends up looking like: #MyTable tr:has('input[value="2014"]')

I believe it may be due to the fact the values are set through code initially, because if I use #MyTable tr:has('input') it returns all of the rows.

Because of maintainability I don't want to hardcode the path and just say $(this).closest("tr")... in javascript code.

Any idea how to retrieve a reference to the TR containing an input with a specific value? If my code is correct, do I need to do something different when setting the value via code?

Answer 1

The selector $('#MyTable tr:has(input[value="2014"])') will only work if the input element has a hardcoded value attribute with a value of 2014 . See this example .

If you are trying to select an input element without a hardcoded value attribute, then you could filter over the elements and return input elements whose value equals 2014 . Depending on your needs, you could listen to the input or change event.

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');
});

Answer 2

If you were to use a plan JS solution it might look like:

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];
    }
  }
}

and would probably run very much faster than a jQuery selector.

However, since you say " When the value in any of those controls changes… " then perhaps you are using a change event, so you can simply get the input from which the event was dispatched ( this within the listener) and go up to the nearest row.

Answer 3

Though I agree that vanilla JS would be more efficient, I think filtering is too expensive? I'd go with listening for the change event and finding the closest row:

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