FixedMidashi 関数説明

TOP    注意事項・その他    関数説明    デモページ    動作確認用ページ    ダウンロード

目次

本ページでは、コピー要素のイベントハンドラの処理と、FixedMidashi の関数について説明しています。 create() 関数により固定見出しを作成した後、元 table の内容を JavaScript 等で動的に 変更することがなければ、本ページを読む必要はありません。

コピー要素のイベントハンドラ

本プログラムが作成したコピー要素の以下のイベントハンドラは、 元要素のイベントハンドラを呼び出します。 元要素に同名のイベントハンドラがなければ何もしません。

onclick, ondblclick,
onkeydown, onkeypress, onkeyup,
onmousedown, onmouseup, onmouseover, onmouseout, onmousemove

例えば、コピーした <td> やコピーした <input type="checkbox"> がクリックされた場合、 コピー元要素の onclick のイベントハンドラを呼び出します。 なお、addEventListener() で登録されたイベントリスナーは呼び出しません。

入力用要素の onchange での同期処理

固定見出し内に <input>, <select> 等の入力用要素がある場合、 元要素の値とコピー要素の値が常に同じになるように次のような制御をしています。

「値」とは次の属性値のことです(入力要素のタイプごとに異なります)。
要素タイプ属性名
<select>各<option>のselected
<input type="checkbox">
<input type="radio">
checked
<input type="text">
<input type="password">
<textarea>
value

このように、固定見出し内に <input>, <select> 等の入力用要素がある場合、 画面からの手作業での変更に対しては、本プログラム(onchange のイベントリスナー)で この同期処理を行うため、特別な処理は必要ありません。

しかし、元要素の値を JavaScript 等のプログラムで変更する場合は、 onchange イベントが発生しないため、本プログラムでは値が変わったことを検出する 契機がなく同期処理ができません。 この場合は、コピー要素の値を同じにするための処理が別途必要です。 具体的な同期処理の方法については syncValue() を参照してください。

create - 固定見出しの作成

create()

固定見出しを作成します。TOP ページの使用方法を参照してください。

本関数呼出後に、各列の幅が変わるような変更、各行の高さが変わるような変更、 行の追加や削除等を行う場合は、本関数を再度呼び出し、固定見出しを再作成する必要があります。 本関数は、作成済みの固定見出しがあった場合は一旦削除してから再作成します。

syncValue - 入力用要素の値の同期

syncValue(srcElement)

固定見出し内の入力用要素の値を元要素と同じにします。 固定見出し内に <input>, <select> 等の入力用要素がある場合で、 元要素の値を JavaScript 等で動的に変更する場合は、 本関数を使用してコピー要素の値を同じにする必要があります。

パラメータ:
srcElement - 元要素(<input>, <select>, <textarea>)

指定された元要素に対するコピー要素がない場合や、 入力用要素でない場合は何もしません。

固定見出しは、スクロールしていない時は非表示になっており、 スクロールしている時のみ表示されます。 次の2つのテーブルは、チェックボックスの列を固定しているため、 スクロールしていない時に見えているチェックボックスは元要素ですが、 スクロールした時に見えているチェックボックスはコピー要素です。

NG    ABCD
1 A0001B0001C0001D0001
2 A0002B0002C0002D0002
3 A0003B0003C0003D0003
  
OK    ABCD
1 A0001B0001C0001D0001
2 A0002B0002C0002D0002
3 A0003B0003C0003D0003

両者とも、先頭のチェックボックスのクリック時、 下の全てのチェックボックスのチェック状態が同じになるように 以下のスクリプトで制御していますが、 前者はコピーしたチェックボックスの状態が変わりません(スクロールするとわかります)。

// 全てのCHECKBOXの状態を変更する
var chkList = document.getElementsByName(chkboxName);
for (var i = 0; i < chkList.length; i++) {
	var chkbox = chkList[i];
	// 元要素の値を変更
	chkbox.checked = checked;
	// コピー要素に同じ値を設定(前者にはこの処理がない)
	FixedMidashi.syncValue(chkbox);
}

両者の違いは、syncValue() の呼出しの有無です。 このような場合は、必ず本関数を呼び出す必要があります。

syncStyle - スタイルの同期

syncStyle(srcElement, styleName)

コピー要素のスタイルを元要素と同じにします。 固定した行や列内の元要素のスタイルを JavaScript 等で動的に変更することがなければ 呼び出す必要はありません。

パラメータ:
srcElement - 元要素
styleName - スタイルのプロパティ名(backgroundColor, color 等)。 カンマ区切りで複数のスタイルを指定することができます。カンマ前後の空白は無視します。

次の2つのテーブルは、3列を固定しています。

No   NAMEABCD
1 NAME1A0001B0001C0001D0001
2 NAME2A0002B0002C0002D0002
3 NAME3A0003B0003C0003D0003
  
No   NAMEABCD
1 NAME1A0001B0001C0001D0001
2 NAME2A0002B0002C0002D0002
3 NAME3A0003B0003C0003D0003

両者とも、チェックボックスのクリック時、 行<tr>の色が変わるように以下のスクリプトで制御していますが、 前者は固定見出しの色が変わりません(スクロールするとわかります)。

var tr = chkbox.parentNode.parentNode;
// 元要素のスタイルを変更
tr.style.backgroundColor = chkbox.checked ? "yellow" : "";
tr.style.color = chkbox.checked ? "red" : "";
// コピー要素に同じスタイルを設定(前者にはこの処理がない)
FixedMidashi.syncStyle(tr, "backgroundColor,color");

両者の違いは、syncStyle() の呼出しの有無です。 このような場合は、本関数によりコピー要素のスタイルを元要素と同じにすることができます。

その他の関数

getFixedElement(srcElement)

指定された元要素に対するコピー要素を返します。 存在しない場合は null を返します。 固定行と固定列の重なり合うセルの場合の返却値は不定です。

パラメータ:
srcElement - 元要素
戻り値:
コピー要素
getFixedElements(srcElement)

指定された元要素に対するコピー要素の全てを配列で返します。 存在しない場合は null を返します。 通常は長さ1の配列を返しますが、 固定行と固定列の重なり合うセルの場合は長さ3の配列を返します (コピー要素が3個存在する理由については「固定見出しの作成イメージ(FixedMidashi TOPページ)」 を参照してください)。

パラメータ:
srcElement - 元要素
戻り値:
コピー要素の配列
getSourceElement(fixedElement)

指定されたコピー要素に対する元要素を返します。 指定された要素がコピー要素でない場合は null を返します。

パラメータ:
fixedElement - コピー要素
戻り値:
元要素
isFixedElement(element)

指定された要素がコピー要素の場合に true を返します。

戻り値:
コピー要素の場合に true
remove()

create() で作成した固定見出しを削除します。 固定見出しがなければ何もしません。


初版: 2012年7月21日   最終更新: 2014年8月12日    Copyright (C) 2012-2018 K.Koiso
▲ページトップ