!!入力できるテーブル
[実装してみた|https://qweer.info/api/matrix/menu/]
{{ref_image 2021-02-20.png}}
[ソース|https://github.com/john-smith-7701/mmt/commit/f2ed90cdf0a8f73b3688b47cc670fd2d1082d396]
!css position: sticky;
好きな場所に貼り付けられるステキなプロパティーsticky

行列固定テーブルのCSS

上に固定させる(top)
 .fixed00{
      position: sticky;
      top: 0;
      left: 10;
 }

下に固定させる(bottom)
 .fixed91{
      position: sticky;
      bottom: 0;
      left: 10;
 }

!カーソルキーで移動
行列が多いフォームになるとカーソルキーで移動したくなるので[keyCodeを取り込む|http://park15.wakwak.com/~k-lovely/cgi-bin/wiki/wiki.cgi?page=memo#p22]を参照しカーソルキーでの移動を実装してみた。

 sub keyDown{
    my $s = shift;
	my $text = <<'EndScript';
 var cursMode = true;
 function matrix_keyDown(e){
    let id = e.srcElement.id;
    let res = id.match(/(_i_)(\d+)_(\d+)/);
    let y = 0;
    let x = 0;
    if(res[1] === '_i_'){
      y = Number(res[2]);
      x = Number(res[3]);
    }
    document.getElementById('item1').innerText = id + " " + e.keyCode;
    if (cursMode && e.keyCode == 39) {
       x += 1;
    }else if (cursMode && e.keyCode == 37) {
       x -= 1; 
    }else if (e.keyCode == 40) {
       y += 1;
       cursMode = true;
    }else if (e.keyCode == 38) {
       y -= 1;
       cursMode = true;
    }else if (e.keyCode == 13) {  // Enter
       x = 1;
       y += 1;
       cursMode = true;
    }else if (e.keyCode == 36) {   // Home
       y = 2;
       cursMode = true;
    }else if (e.keyCode == 35) {   // End
       y = 99;
       cursMode = true;
    }else if (e.keyCode == 9) {   // Tab
       cursMode = true;
    }else{
       cursMode = false;
    }
    if(res[1] === '_i_' && y > 1 && x > 0 && cursMode){
       id = res[1] + y + "_" + x;
       document.getElementById(id).focus();
       document.getElementById(id).scrollIntoView({block: 'center',inline: 'center'});
    }
 }
 EndScript
	return $text;
 }