ブログ移転しました。Githubにもアップしました。

tablefix.jsでスクロールバーの分だけ表示がずれるのを修正した。ついでにフォントサイズ変更した時にずれるのにも対応した。 | baiteenのブログ

 

テーブルの列とか行とかを固定できるすごいjqueryプラグインがあるんだけど、縦横両方にスクロールバーが出るとスクロールバーの分だけ表示がずれてしまう。
それがこのサイトのjsファイル。
http://www.otchy.net/javascript/tablefix/

で、それを修正してくれてる人がいたんだけど、横ズレのみ。
縦ズレは直してくれてなかった。
それがこのサイトのjsファイル。
https://github.com/yoshitsugu/tablefix

javascript全然わからない俺だけど頑張って直した。
やり方は、本家のソースと修正した人のソースを見比べてWidthをHeightに書き換えた処理を追加してゴニョゴニョしただけ。

それからもう一つ。
スクリプトでフォントサイズ変更すると列幅が変わって表示がおかしくなっちゃったので、それも何とかした。
やり方は、tablefixで追加されるdivタグに適当なクラスつけるようにして、tablefix適用時にそのクラスついてる親がいるならそれを削除してから従来通りのtablefix処理をするようにしてあげた。
※フォントサイズ変更時にtablefixを再設定してあげる必要がある。

直したところ

スクロールバー分ずれる対応
bodyWidth, bodyHeightを求めたあとに以下を追加

//------------------------------- スクロールバー分ずれる対策 ---------------------------------
//スクロールバーの幅の取得
var scrollbarInner = document.createElement('p');

var scrollbarOuter = document.createElement(‘div’);
scrollbarOuter.style.position = “absolute”;
scrollbarOuter.style.top = “0px”;
scrollbarOuter.style.left = “0px”;
scrollbarOuter.style.visibility = “hidden”;
scrollbarOuter.appendChild (scrollbarInner);

scrollbarInner.style.width = “100%”;
scrollbarInner.style.height = “200px”;
scrollbarOuter.style.width = “200px”;
scrollbarOuter.style.height = “150px”;
scrollbarOuter.style.overflow = “hidden”;
document.body.appendChild (scrollbarOuter);
var w1 = scrollbarInner.offsetWidth;
scrollbarOuter.style.overflow = ‘scroll’;
var w2 = scrollbarInner.offsetWidth;
if (w1 == w2) w2 = scrollbarOuter.clientWidth;
document.body.removeChild (scrollbarOuter);
var scrollBarWidth = (w1 – w2);

scrollbarInner.style.width = “200px”;
scrollbarInner.style.height = “100%”;
scrollbarOuter.style.width = “150px”;
scrollbarOuter.style.height = “200px”;
scrollbarOuter.style.overflow = “hidden”;
document.body.appendChild (scrollbarOuter);
var h1 = scrollbarInner.offsetHeight;
scrollbarOuter.style.overflow = ‘scroll’;
var h2 = scrollbarInner.offsetHeight;
if (h1 == h2) h2 = scrollbarOuter.clientHeight;
document.body.removeChild (scrollbarOuter);
var scrollBarHeight = (h1 – h2);

if(!(withWidth && withHeight)){
scrollBarWidth = 0;
scrollBarHeight = 0;
}
//——————————- スクロールバー分ずれる対策 ———————————

それからbodyDivのwidthとheightを指定する所を以下のように修正

bodyDiv
.width(bodyWidth + (withWidth ? 20 : 0) + (withHeight ? 20 : 0) + scrollBarWidth)
.height(bodyHeight + (withWidth ? 20 : 0) + (withHeight ? 20 : 0) + scrollBarHeight)
.css({left: offsetX + 'px', top: offsetY + 'px'});

フォントサイズ変更対応
処理継続の判定の前に以下を追加

// 初期化処理
if($(this).parent().parent().hasClass('tablefixTableWrapperDiv')){
$(this).unwrap();
$(this).siblings().each(function(){$(this).remove();});
$(this).unwrap();
}

外部 div の設定に以下のように適当なクラスの指定を追加

baseTable.wrap("<div class='tablefixTableWrapperDiv'></div>");

これで、フォントサイズ変更するスクリプト実行した後に、再度tablefixしてあげれば一回解除して再設定してくれる。

今回はじめてプラグインを修正したので、ソースはグチャグチャだけど、とりあえず目的は達成できた。
jsちょっと面白いかも。