Traversing table columns by class name

<tr>
  <td class = "edit edit_c1">C1</td>
  <td>C2</td>
  <td class = "edit edit_c3">C3</td>
  <td>C4</td>
<tr>
<tr>
  <td class = "edit edit_c1">C1</td>
  <td>C2</td>
  <td class = "edit edit_c3">C3</td>
  <td>C4</td>
<tr>

I have some Jeditable code that runs on ".edit_c1, edit_c2 etc". I want to traverse to the next editable column on TAB. I have another class "edit" to identify editable columns. 开发者_Python百科I am assuming nextall() should work but none of the options below gets me the handle to the next editable column (TD with class = "edit").

$(".edit").keypress(function (event) {
                var td = $(this).closest('td');
                console.log(this);
                // returns <td class="edit edit-c1" style="white-space:nowrap">
                switch (event.keyCode) {
                    // TAB   
                    case 9:
                        console.log("TABBED");
                        console.log($(this).closest('td').next('td[@class=edit]'));
                        //Above logs [td] a handle to C2 instead of C3
                        console.log($(this).closest('td').nextAll(':has(.edit):first').find('.edit'));
                        //Above logs []
                        console.log($(this).nextAll(':has(.edit):first').find('.edit'));
                        //Above logs []
                        console.log($(this).closest('td').next().find('.edit'));
                        //Above logs []
                        break;
                }
            });

The code does work to a point where I see the console.log messages in firebug. Jeditable portion of the code below.

            $('.edit-c1').editable(function (value, settings) {
                var tr = $(this).closest('tr'),
                id = tr[0].id;
                //comment the line below if you want to test
                //saveWSField(id, value, "C1");
                return (value);
            }, {
                type: 'text',
                onblur: 'submit'
            });

This is not trivial as the structure of <table> makes it difficult to determine the next <td> because it may not be the child of the same <tr>. Meaning if something is not found you would need to traverse up to the parent <tr> then to the next <tr> sibling, then the next <td> child.

Try something like:

// ASSUMPTION: td is the current focused element
next_td = td.next('td.edit');

if (next_td.length < 1) {
  next_td = td.closest('tr').children('td.edit').first();
}

if (next_td.length < 1) {
  // nothing left to tab
}
else {
  // focus next_td...
}

I haven't looked in too much detail at what jeditable injects into the DOM to make things editable, but it seems to inject a small form.

With this in mind, the following works for me:

html

<table>
    <tbody>
        <tr>
            <td class = "edit edit_c1"><form><input type="text" value="C1" /></form></td>
            <td>C2</td>
            <td class = "edit edit_c2"><form><input type="text" value="C3" /></form></td>
            <td>C4</td>
        </tr>
        <tr>
            <td class = "edit edit_c1"><form><input type="text" value="r2C1" /></form></td>
            <td>C2</td>
            <td class = "edit edit_c2"><form><input type="text" value="r2C3" /></form></td>
            <td>C4</td>
        </tr>
    </tbody>
</table>

Then the following javascript:

$(".edit").keypress(function(event) {
    var td = $(this).closest('td');
    console.log(this);
    switch (event.keyCode) {
        // TAB   
    case 9:
        console.log("TABBED");
        console.log($(this).html());
        var $ntd = $(this).nextAll('.edit');
        if ($ntd.length === 0) {
            console.log($(this).parent().nextAll('tr').html());
            $ntd = $(this).parent().nextAll('tr').children('td.edit').first();
        }
        // $ntd should hold what we need
        console.log($ntd.html());
        break;
    }
});

I'm pretty sure you can't bind a keypress event to a td element... how are you gaining focus on the td to begin with?

Try this:

$(".edit").delegate('input','keydown',function (event) {
    switch (event.keyCode) {
        // TAB   
        case 9:
          var nexted = $(this).parents('tr').find('td.edit:gt('+$(this).index()+'):first');
          nexted.trigger('click');
          return false;
    }
});