Question

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

我有一些可在“.edit_c1，edit_c2等”上运行的可编辑代码。我想遍历TAB上的下一个可编辑列。我有另一个类“编辑”来识别可编辑的列。我假设nextall（）应该可以正常工作，但下面的选项都没有让我获得下一个可编辑列的句柄（带有class =“edit”的TD）。

$(".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;
                }
            });

代码确实有效，我在firebug中看到了console.log消息。下面代码的可编辑部分。

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

Answer 1

这并非易事，因为<table>的结构使得很难确定下一个<td>因为它可能不是同一个<tr>的孩子。意思是如果找不到某些内容，则需要遍历父<tr>然后到下一个<tr>兄弟，然后是下一个<td>孩子。

尝试类似：

// 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...
}

Answer 2

我很确定你无法将一个按键事件绑定到一个td元素......你如何开始关注td？

试试这个：

$(".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;
    }
});

Answer 3

我没有详细研究过哪些jeditable注入DOM以使事物可编辑，但它似乎注入了一个小形式。

考虑到这一点，以下内容适用于我：

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>

然后是以下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;
    }
});

按类名遍历表列

3 个答案: