Finding parent class and id

Question

Well after countless tries I can't get this work?

<script type="text/javascript">
    $("td input").focusout(function() {
      var column = $(this).parent('td').attr('class');
      var row = $(this).parent('tr').attr('id');
      $('#dat').HTML(row+" "+column);
    }); 
</script>

And the html looks like this:

<tr class="numbers" id="1">
<td class="a" align="right">1</td>
<td class="b"><input class="input" type="text" value=""/></td>
<td class="c"><input class="input" type="text" value=""/></td>

<td class="d"><input class="input" type="text" value=""/></td>
<td class="e"><input class="input" type="text" value=""/></td>
<td class="f">0</td>
<td class="g"><input class="input" type="text" value=""/></td>
</tr>

Can anyone point me to the right direction on what might be wrong?

Answer 1

Notice that it should be lowercase

$('#dat').HTML(row+" "+column);

.html

and

$(this).parent('tr')

is null, the input can't have a parent TR

alternatively to this you can use

.closest( selector, [ context ] ) function

Answer 2

Try:

$(this).closest('td').attr('class')

at the appropriate spot in your code. Same thing for ID.

Answer 3

Your code looks right for the most part, just fix these things:

$('#dat').HTML(row+' ' +column);

To this:

$('#dat').html(row + ' ' + column);

And this:

$(this).parent('tr').attr('id');

To this:

$(this).parents('tr').attr('id');

Answer 4

You want to use the .parents() function rather than the .parent().

The reason, from the documentation, my highlighting.

Given a jQuery object that represents a set of DOM elements, the .parent() method allows us to search through the parents of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree.