Обход столбцов таблицы по имени класса - PullRequest
Новая
       12

Обход столбцов таблицы по имени класса

1 голос
/ 27 апреля 2011 
<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>

У меня есть Jeditable-код, который работает на ".edit_c1, edit_c2 и т. Д.".Я хочу перейти к следующему редактируемому столбцу на вкладке.У меня есть другой класс «edit» для идентификации редактируемых столбцов.Я предполагаю, что nextall () должен работать, но ни один из приведенных ниже вариантов не дает мне указатель на следующий редактируемый столбец (TD с 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;
                }
            });

Код работает до точки, гдеЯ вижу сообщения console.log в firebug.Jeditable часть кода ниже. 

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

Ответы [ 3 ]

2 голосов
/ 27 апреля 2011

Это не тривиально, так как структура <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...
}
0 голосов
/ 27 апреля 2011

Я не слишком подробно рассмотрел то, что 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;
    }
});
0 голосов
/ 27 апреля 2011

Я почти уверен, что вы не можете связать событие нажатия клавиши с элементом 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;
    }
});
...