Matrix 行列固定テーブルの実装

 入力できるテーブル

実装してみた

ソース

 css position: sticky;

好きな場所に貼り付けられるステキなプロパティーsticky

行列固定テーブルのCSS

上に固定させる(top)

.fixed00{
     position: sticky;
     top: 0;
     left: 10;
}

下に固定させる(bottom)

.fixed91{
     position: sticky;
     bottom: 0;
     left: 10;
}

 カーソルキーで移動

行列が多いフォームになるとカーソルキーで移動したくなるのでkeyCodeを取り込むを参照しカーソルキーでの移動を実装してみた。

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