【javascript】table特定行・列の固定、table列幅を可変

javascript

在庫の一覧、社員の一覧など、
webアプリケーションにて、HTMLのtableを用いて実装する事が多い。
以下のプラグインを適用し、多少のコードを記述するだけで
機能を拡張することが出来る。

行・列の固定

　・fixed_midashi.js
　①参照可能なパスにライブラリを配置し、参照する

　　<script src="${f:url('/js/fixed_midashi.js')}"></script>

　②列を固定したい table に _fixedhead 属性を定義、 FixedMidashi.create() を呼び出す。
　　例）先頭１行と、先頭２列固定

　　<body onLoad="FixedMidashi.create();">
　　  <table _fixedhead="rows:1; cols:2">
　　　　…

　参考：FixedMidashi - htmlテーブルヘッダの固定

列幅の変更

　・colResizable-1.6.min.js
　①参照可能なパスにライブラリを配置し、参照する

　　<script src="${f:url('/js/colResizable-1.6.min.js')}"></script>

　②列幅を可変にしたい table に任意の id を定義し、colResizable()にて初期化を行う。

  <table id="sample">
　　…
　$(function(){
  　$("#sample").colResizable();
　});

　参考：colResizable – Resizable columns and tables


※両方のプラグインを使用しても、動作すること確認済。