Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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">
    <td><input type="text" /></td>
    <td><input type="text" class="changeHandled"/></td>
    <td><input type="text" class="changeHandled" /></td>
</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?
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');
                This question was so long ago I don't even recall how I fixed it, but re-reading it your solution will in fact work so I've marked it as the answer.
– Ed Williams
                Nov 10, 2015 at 20:15
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.
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
                Yes but this doesn't trigger on click events, just when a text input is changed. Or he might even do it on blur. But I wouldn't run through every input and check its value whenever one input changes - that's expensive and not necessary when just wanting to change/check the row of the changed input.
– I'm Joe Too
                Mar 10, 2015 at 1:40
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.