TABLEのヘッダ行・左３列目までの固定表示、プラグイン：FixedMidashiで達成したい

Question

前提・実現したいこと

FixedMidashiの採用をこちらのサイトhttp://hp.vector.co.jp/authors/VA056612/fixed_midashi/manual/index.htmlを参考に対応しようとしています。
達成しようとしているTABLEのクラス名はexstrsvです。また、そのテーブルを格納したDIVのクラス名はupdLinesとしています。

紹介されたサイトをみる限り、
・TABLEにTHEADが含まれるデザインであれば、特段ヘッダ行の指定をしなくても1行目をヘッダとみなして固定表示が達成される筈
・TABLEを囲むDIVのStyleSheetは　overflow=scrollとすべき
ということで、上記2点に加えTABLEに_fixedheadの属性追加が必要ともありましたので_fixedhead="cols:3; div-auto-size: none;"をTABLEに属性追加しています。（div-auto-size: none;"を指定しないと画面いっぱい横長のTABLEになってしまう）

発生している問題・エラーメッセージ

縦のスライドバー・横のスライドバーを操作しても、行・列の固定表示が達成されません。
動的に行が追加されるTABLEだったり、動的にDIVの縦幅が変わる場合は正常に適用できないプラグインなのでしょうか？

該当のソースコード

【HTML抜粋】

<div class="updLines"> <table _fixedhead="rows:1; cols:3; div-auto-size: none;" class="exstrsv"> </table> </div>

【CSS】
.updLines {
overflow: scroll;
display: none;"
}

【JS】
$(".updLines").fadeIn("slow");

$(".exstrsv").append("<thead><tr><th></th>" +
"<th>予約番号</th>" +
"<th>行№</th>" +
"<th>受注先CD</th>" +
"<th>受注先名</th>" +
"<th>出荷先CD</th>" +
"<th>出荷先名</th>" +
"<th>納入先名</th>" +
"<th>営業担当者</th>" +
"<th>品名CD</th>" +
"<th>品名</th>" +
"<th>ロット№</th>" +
"<th>予約数量</th>" +
"<th>受注済数量</th>" +
"<th>予約終了日</th>" +
"<th>予約登録日</th></thead>");

for (var i = 0; i < data.length; i++) {
	if (i == 0) {
		$(".exstrsv thead").after("<tbody><tr><td class='exupd0'>" +
		"<input type='checkbox'class='act' name='act" + i + "' />" +
		"</td><td class='exupd'>" + data[i][0] +
		"</td><td class='exupd'>" + data[i][1] + "</td><td class='exupd'>" + data[i][2] +
		"</td><td class='exupd'>" + data[i][3] + "</td><td class='exupd'>" + data[i][4] +
		"</td><td class='exupd'>" + data[i][5] + "</td><td class='exupd'>" + data[i][6] +
		"</td><td class='exupd'>" + data[i][7] + "</td><td class='exupd'>" + data[i][8] +
		"</td><td class='exupd'>" + data[i][9] + "</td><td class='exupd'>" + data[i][10] +
		"</td><td class='exupd1'>" + data[i][11] + "</td><td class='exupd1'>" + data[i][12] +
		"</td><td class='exupd'>" + data[i][13] + "</td><td class='exupd'>" + data[i][14] + "</td></tr>");

	} else {
		$(".exstrsv tbody > tr:last").after("<tr><td class='exupd0'>" +
		"<input type='checkbox'class='act' name='act" + i + "' />" +
					"</td><td class='exupd'>" + data[i][0] +
					"</td><td class='exupd'>" + data[i][1] + "</td><td class='exupd'>" + data[i][2] +
					"</td><td class='exupd'>" + data[i][3] + "</td><td class='exupd'>" + data[i][4] +
					"</td><td class='exupd'>" + data[i][5] + "</td><td class='exupd'>" + data[i][6] +
					"</td><td class='exupd'>" + data[i][7] + "</td><td class='exupd'>" + data[i][8] +
					"</td><td class='exupd'>" + data[i][9] + "</td><td class='exupd'>" + data[i][10] +
					"</td><td class='exupd1'>" + data[i][11] + "</td><td class='exupd1'>" + data[i][12] +
					"</td><td class='exupd'>" + data[i][13] + "</td><td class='exupd'>" + data[i][14] + "</td></tr>");
	}
}
$(".exstrsv tbody > tr:last").after("</tbody>");



if (data.length >= 6) {
	$(".updLines").height(8.28 + 'em');
} else {
	$(".updLines").height(data.length * 2.42  + 'em');
}
FixedMidashi.create();　//★★★

// 【追記しました】動的でTABLEの内容が可変 = 以下で達成されている
$("[name=tcd],[name=scd],[name=iperson]").on("change", function() {
var r = $("[name='q1']:checked").val();

//操作モードが更新で、パラメータが変化したら
if (r != "0") {
	updRenew();
}

});

function updRenew () {

updRemove();

//　モーダルモードにするため画面を覆う
$("body").append('<div id="modal-overlay"></div>') ;
$("#modal-overlay").append("<img id='loader' src='./img/ajax-loader.gif' alt='Now Loading...'>");
$("#modal-overlay").fadeIn("slow");

// ★★★ mcrsvingというfunctionが for文のテーブル生成部分です ★★★
var d = mcrsvinq();
d.done(function(){
	$("#loader").remove();
	$("#modal-overlay").fadeOut("slow", function(){
		$('#modal-overlay').remove();
	});
});
d.fail(function(){
	$("#modal-overlay").fadeOut("slow", function(){
		$('#modal-overlay').remove();
	});
	alert("【基幹システムから予約情報を参照できず...】");
	return false;
});

}

function updRemove () {
$(".msg").text("");
var cnt = $(".exstrsv tr").length;
if (cnt > 0) {
alert("表示内容・入力内容はクリアされます。");
}

$("table.exstrsv thead").remove();
$("table.exstrsv th").remove();
$("table.exstrsv tbody").remove();
$("table.exstrsv tr").remove();

$(".updLines").css("display","none");	//⇔ちょっと怪しい

}

試したこと

ブラウザはIEとFireFoxで確認済みです。
参考にした記事ではbodyのonLoadで当該プラグインを呼び出すような記述がなされております。

<body onLoad="FixedMidashi.create();"> しかし当方はTABLEの体裁が整ってから当該を呼び出すようにしています。onLoadでは期待結果をうまなかったので。結局体裁整えてから呼び出すようにしても駄目なのですが

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

非表示では正常に動かないと思います。
display: none; をやめるか、アニメーション後に動作するようにしましょう。

$(".updLines").fadeIn("slow", function() {
  FixedMidashi.create();
});

Comments

[saya24]

ありがとうございます！確かにヘッダと３列の固定表示が達成できました！！！
但し...１つ問題が発生しました。
もしお手間でなければご見解ください。

このテーブルは、他の要素の変化をもって動的に内容が変化する作りにしています（パラメータを入力するINPUT=TEXTが近辺に配置されている）、そのテーブル内容がリフレッシュされると決まって１行しかデータが表示されない問題が生じています。

IEの開発ツールでみると、現実<tr>タグが１行しか見受けられなくなってしまっています。
こんなこと考え難いと思うのですが、何か思い当たる節はありませんでしょうか

[mepon]

横からすみません。
FixedMidashiの中身を見たわけではないので推測ですが、ヘッダー固定系のライブラリには
ページがレンダリングされた時のテーブル情報までしか処理してくれないものが多いです。
もしかするとその影響で追従できずに崩れてるのかもしれませんね。
テーブル情報を更新したのちページのリロードをしてみてはいかがでしょうか
それで正しく表示されるようであれば、おっしゃる動的な更新は難しい気がします。
パラメーターが変更されたら、画面のリロードもしてあげる処理を入れる。
とかで対応するのが良いかもしれないですね
もし、間違ってたらすみません

[x_x]

「動的に内容が変化」する処理を質問文に追記願います。

[saya24]

動的に内容が変化する仕組みを、抜粋ですが追記させて頂きました。

[x_x]

ああ、thead削除しちゃってるんですね。これはアウトです。
mepon さんの言うように再生成(FixedMidashi.remove()して構築後に再びFixedMidashi.create())するか、theadやtbodyを変更しないようにしたほうがいいと思います。

[saya24]

了解です、お二方貴重なご見解をありがとうございます。ちょっとコーディングを工夫したいと思います。