FixedMidashi 関数説明

目次

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

• コピー要素のイベントハンドラ
• 入力用要素の onchange での同期処理
• 固定見出しの作成 - create()
• 入力用要素の値の同期 - syncValue()
• スタイルの同期 - syncStyle()
• その他の関数

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

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

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

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

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

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

• 元要素の onchange イベントが発生した場合は、その値をコピー要素にコピーします。
• コピー要素の onchange イベントが発生した場合は、その値を元要素にコピーして、 元要素の onchange を呼び出します。

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

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

create - 固定見出しの作成

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

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

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

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

パラメータ:

srcElement - 元要素(<input>, <select>, <textarea>)

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

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

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

// 全ての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 - スタイルの同期

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

パラメータ:

srcElement - 元要素

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

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

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

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

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

その他の関数

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

パラメータ:

srcElement - 元要素

戻り値:

コピー要素

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

パラメータ:

srcElement - 元要素

戻り値:

コピー要素の配列

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

パラメータ:

fixedElement - コピー要素

戻り値:

元要素

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

戻り値:

コピー要素の場合に true

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