0

I have a series of inputs listed within table cells like spreadsheet. I'm simply trying to get jquery to figure out which column they're in when I start typing. I'd like to to this without putting identifiers in the columns themselves.

http://jsfiddle.net/jx3FP/

I've made a couple of attempts using jquery's index, but I'm obviously missing something. When I try to get the index of the table data (td), I get it for the document, not for its parent. When I try to specify the parents and children, it doesn't seem to be a thing that index does. Thanks in advance for any help.

$('tr td input').live('keyup',function(e){
    /* attempt 1, returns nth td in document instead of the nth td in the table row
    var column = $(this).parent().index('td');
    $('#column').val(column);
    */
    /* attempt two */
    $parentRow = $(this).parents('tr');
    $parentCell = $(this).parent('td');
    var $column = $(this).parent('td').index('tr');
    // insert column number into #column
    var $column = ($parentRow).index($parentCell);
    $('#column').val($column);
});
Jeremy L.
  • 853
  • 8
  • 15

2 Answers2

0

You're looking for closest, not parent or parents.

var cellThisInputIsIn = $(this).closest('td');
var theCellsIndexWithinTheRow = cellThisInputIsIn.index();
var rowThisInputIsIn = $(this).closest('td');
var theRowsIndexWithinTheTableBody = rowThisInputIsIn.index();

It's not clear what you want to do with the cell/row and/or their indexes once you have it/them, but that's how you find it/them.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
0

jsfiddle: http://jsfiddle.net/jx3FP/1/

html

<table>
    <tr>
        <td>
            <input />
        </td>
        <td>
            <input />
        </td>
        <td>
            <input />
        </td>        
    </tr>
    <tr>
        <td>
            <input />
        </td>
        <td>
            <input />
        </td>
        <td>
            <input />
        </td>        
    </tr>    
</table>
<br />
<input id="column" placeholder="column" />
<input id="row" placeholder="row" />

JS 

$('tr td input').live('keyup',function(e){
        /* attempt 1, returns nth td in document instead of the nth td in the table row
        var column = $(this).parent().index('td');
        $('#column').val(column);
        */
        /* attempt two */
        var cellThisInputIsIn = $(this).closest('td');
        var rowThisInputIsIn = $(this).closest('tr');
        var $column = cellThisInputIsIn.index();
        var $row = rowThisInputIsIn.index();
        $('#column').val($column);
        $('#row').val($row);
    });
Abhas Tandon
  • 1,859
  • 16
  • 26
  • Can you explain this for me? Why wouldn't my input's td parent (for which there is only one) be the same thing as my closest td? – Jeremy L. Apr 20 '14 at 18:05
  • 1
    Actually, the closest vs. parent doesn't seem to be a problem like I thought, it was just how I was using index. http://jsfiddle.net/jx3FP/2/ I just needed to change: var column = $(this).parent().index('td'); to var column = $(this).parent('td').index(); – Jeremy L. Apr 20 '14 at 18:09
  • @daprezjer Ok. That's really neat solution. – Abhas Tandon Apr 20 '14 at 18:12
  • @daprezjer even in my code if you change `$(this).closest('td');` to `$(this).parent('td');` It will work perfectly – Abhas Tandon Apr 20 '14 at 18:14
  • Yup, that was my point. You helped me by letting me know that the index() shouldn't contain the element but rather the original selector, but that was the real error. Thank you! – Jeremy L. Apr 20 '14 at 18:24