如何在表中实现箭头导航

Question

Given a table with data.selected=[i,j] and with a keydown event listener to change the coordinate based on keyboard arrows, how and where to insert the expression if (i===selected[0] && j = selected[1]) node.focus() ?

<table on:keydown='arrow(event.keyCode)'>
  {{#each rows as row, i}}
  <tr>
    {{#each row as val, j}}
    <td tabIndex=1>{{val}}</td>
    {{/each}}
  </tr>
  {{/each}}
</table>

The main handler can change the indices of selected but does not have a reference to the node itself.

I've tried inserting the expressions inside the template and in if block but i get errors.

Answer 1

I would probably do it something like this — put data attributes on the cells themselves, and then use querySelector to find the node to call .focus() on.

Here's a demo in the REPL :

<table ref:table>
  {{#each rows as row, i}}
    <tr>
      {{#each row as val, j}}
      <td tabIndex=1>
        <input
          data-row='{{i}}'
          data-col='{{j}}'
          on:keydown='arrow(this, event.keyCode)'
          on:focus='set({selected: [i, j] })'
          bind:value='val'>
      </td>
      {{/each}}
    </tr>
  {{/each}}
</table>

<script>
  export default {
    oncreate () {
      this.observe( 'selected', s => {
        this.refs.table.querySelector( `[data-row="${s[0]}"][data-col="${s[1]}"]` ).focus();
      });
    },
    methods: {
      arrow ( node, code ) {
        if ( code < 37 || code > 40 ) return;

        let i = +node.dataset.row;
        let j = +node.dataset.col;

        const rows = this.get( 'rows' );
        const row = rows[i];

        if ( code === 37 ) j = Math.max( 0, j - 1 );
        if ( code === 39 ) j = Math.min( j + 1, row.length - 1 );
        if ( code === 38 ) i = Math.max( 0, i - 1 );
        if ( code === 40 ) i = Math.min( i + 1, rows.length - 1 );

        this.set({ selected: [ i, j ] });
      }
    }
  };
</script>