Auto-open Next Field 구현 방안

think.md

어떻게 구현할까?

필요한 상황 정리

• static table with one element per row ( 1:1 )
• static table with multiple element per row ( n:1 )
• dynamic table with multiple element per row ( n:n )

Priority (exptected %)

• 2 (50%)
• 3 (40%)
• 1 (10%)

Example of each situation

• static table with one element per row (10%)

<tr>
  <td> Type 1 </td>
  <td> __value__ </td>
</tr>
<tr>
  ...
</tr>

• static table with multiple element per row (45%)

<tr>
  <td> Type 1 </td>
  <td> __value__ </td>
  <td> Type 2 </td>
  <td> __value__ </td>
  <td> Type 3 </td>
  <td> __value__ </td>
</tr>
<tr>
  <td> Type 1 </td>
  <td> __value__ </td>
  <td> Type 2 </td>
  <td> __value__ </td>
  <td> Type 3 </td>
  <td> __value__ </td>
  <td> Type 4 </td>
  <td> __value__ </td>
</tr>
<tr>
  ... <!-- 3 or 4 elements in one row -->
</tr>

• dynamic table with multiple element per row (40%)

<tr>
  <td> Type 1 </td>
  <td> __value__ </td>
  <td> Type 2 </td>
  <td> __value__ </td>
</tr>
<tr>
  ... <!-- same with above row -->
</tr>

Solutions

1. DOM Symantic을 이용한 탐색 ( n:n 경우 처리 가능 - DT )

// when 'hidden' event fired

// n:n situation
$(this).closest('td').next().find('.editable');
// if it reaches end of row
$(this).closest('tr').next().find('.editable')[0];

2. tabindex를 이용한 탐색 ( 1:1, n:1 경우 처리 가능 )

// when 'hidden' event fired
$list = $('a[tabindex]');

$list.each(function(idx, elem) {
  $(elem).on('hidden', function(e, reason) {
    if(reason === 'save') {
      if(idx+1 < $list.length) {
        $list[idx+1].editable('show');
      }
    }
  }
}