複雑なテーブルの構造を管理するプラグイン
jQuery Plugin
複雑なテーブルの構造を管理するプラグイン
目的
ｍ行×ｎ列でテーブルを作成し、そのテーブル内のセル（<ｔｄ>）を操作し複雑な形の表を作成する。
そして、その各セルにデータを記載することを目的に作ったプラグインです。
複雑な形の表を作成するのは骨の折れる作業となります。
ホームページビルダーのようなツールを使えば比較的容易に作成できますが、編集には手間をとります。 更に、不要なコードをhtmlに記載されてしまい、かえって煩雑となります。
このプラグインを使えばエディタにより複雑な表を簡単に作ることができます。
そして、データの修正、表の各セルの色を変えるなどの作業も手軽にできます。
そして、その各セルにデータを記載することを目的に作ったプラグインです。
複雑な形の表を作成するのは骨の折れる作業となります。
ホームページビルダーのようなツールを使えば比較的容易に作成できますが、編集には手間をとります。 更に、不要なコードをhtmlに記載されてしまい、かえって煩雑となります。
このプラグインを使えばエディタにより複雑な表を簡単に作ることができます。
そして、データの修正、表の各セルの色を変えるなどの作業も手軽にできます。
サンプル まずは表を作成
htmlの記載
<head>タグ内で、jQueryを読み込んだ後、このライブラリーを読み込みます。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script src="/commondata/jscommon/jqManTblStruct.js" type="text/javascript"></script>
<body>内の表を作成したい箇所へ
<div id="tbl1Div"></div>
と、id名を付けてdivを配置します。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script src="/commondata/jscommon/jqManTblStruct.js" type="text/javascript"></script>
<body>内の表を作成したい箇所へ
<div id="tbl1Div"></div>
と、id名を付けてdivを配置します。
5×6のセルを作ります。各セルに行列番号を表示します。
#tbl1Divに作成しす。
var options={
"RowCol":"5,6", //作成する行,列 の数
"isDspRC":true //セルに行、列番号を表示するか。
}
$("#tbl1Div").jqManTblStruct(options); //テーブル構造を管理するするスクリプトを実行
var options={
"RowCol":"5,6", //作成する行,列 の数
"isDspRC":true //セルに行、列番号を表示するか。
}
$("#tbl1Div").jqManTblStruct(options); //テーブル構造を管理するするスクリプトを実行
サンプル 複雑な形に整形
5×6のテーブルの行列のセルを結合して複雑な形を作る
#tbl2Divに作成します。
var options={
"RowCol":"5,6", //作成する行,列 の数
"isDspRC":true, //セルに行、列番号を表示するか。
"joinSet":["1_1/C5","3_1/R3","4_2/C4"] //結合の指示
}
$("#tbl2Div").jqManTblStruct(options); //テーブル構造を管理するするスクリプトを実行
結合の指示は、次の様な意味です。
1_1/C5 セル1_1を列(C)方向へ５結合する。
3_1/R3 セル3_1を行(R)方向へ３結合する。
と、いうことになります。
var options={
"RowCol":"5,6", //作成する行,列 の数
"isDspRC":true, //セルに行、列番号を表示するか。
"joinSet":["1_1/C5","3_1/R3","4_2/C4"] //結合の指示
}
$("#tbl2Div").jqManTblStruct(options); //テーブル構造を管理するするスクリプトを実行
結合の指示は、次の様な意味です。
1_1/C5 セル1_1を列(C)方向へ５結合する。
3_1/R3 セル3_1を行(R)方向へ３結合する。
と、いうことになります。
サンプル データを表示してみます。
データを表示してみます。
テーブルは、id="#tbl3Div"に作成します。
上で作成した表にデータを表示してみます。
まず、テーブルを作成します。
今回は、もう少し複雑な表を作成してみました。
各セルの行列番号を表示して、その番号を見ながら、 どの列を結合するかなどの設定を行えば簡単に複雑な表を作成できます。
行列番号は、データを表示すれば、番号がそのデータに置き換わり消えます。
var options={
"RowCol":"10,5", //作成する行,列 の数 10×5
"isDspRC":true, //セルに行、列番号を表示するか。
"joinSet":["1_1/C2","2_1/C2","6_1/C2","7_1/C2","8_1/C2","9_1/C2","10_1/C2","3_1/R3"
,"4_2/R2","4_3/R2","6_1/R2","6_3/R2","5_4/C2","7_4/C2"],
"isDspData":true
}
$("#tbl3Div").jqManTblStruct(options); //テーブル構造を管理するするスクリプトを実行
上で作成した表にデータを表示してみます。
まず、テーブルを作成します。
今回は、もう少し複雑な表を作成してみました。
各セルの行列番号を表示して、その番号を見ながら、 どの列を結合するかなどの設定を行えば簡単に複雑な表を作成できます。
行列番号は、データを表示すれば、番号がそのデータに置き換わり消えます。
var options={
"RowCol":"10,5", //作成する行,列 の数 10×5
"isDspRC":true, //セルに行、列番号を表示するか。
"joinSet":["1_1/C2","2_1/C2","6_1/C2","7_1/C2","8_1/C2","9_1/C2","10_1/C2","3_1/R3"
,"4_2/R2","4_3/R2","6_1/R2","6_3/R2","5_4/C2","7_4/C2"],
"isDspData":true
}
$("#tbl3Div").jqManTblStruct(options); //テーブル構造を管理するするスクリプトを実行
htmlの記載。データの記載方法
テーブルは、id="#tbl3Div"に作成されています。
<body>内の適当な箇所へ、データを表示するためのdivを作成し、そのタグ内にデータを記載します。
このタグ（div）には、次の規則に従ったid名をつけます。
データを表示したいテーブルのid名、この例では、「tbl3Div」へ「Data」を加えたid名とする。
この例では、id="tbl3DivData"となります。
<div id="tbl3DivData">
<p name=1_1>項目１</p>
<p name=1_3>項目２</p>
<p name=1_4>項目３</p>
<p name=1_5>項目４</p>
<div name=2_1>2_1のデータだよ。</div>
<div name=4_1>4_1のデータだよ。</div>
<div name=6_4>6_4のデータだよ。</div>
</div>
タグは、pタグでも、divタグでもその他、何でも構いません。
<body>内の適当な箇所へ、データを表示するためのdivを作成し、そのタグ内にデータを記載します。
このタグ（div）には、次の規則に従ったid名をつけます。
データを表示したいテーブルのid名、この例では、「tbl3Div」へ「Data」を加えたid名とする。
この例では、id="tbl3DivData"となります。
<div id="tbl3DivData">
<p name=1_1>項目１</p>
<p name=1_3>項目２</p>
<p name=1_4>項目３</p>
<p name=1_5>項目４</p>
<div name=2_1>2_1のデータだよ。</div>
<div name=4_1>4_1のデータだよ。</div>
<div name=6_4>6_4のデータだよ。</div>
</div>
タグは、pタグでも、divタグでもその他、何でも構いません。
サンプル セルの色など、属性を変えてみます。
セルの色など、属性を変えてみます。
#tbl3Divに作成したと同じテーブルを、#tbl4Divに作成しました。
各セルに付いている、class名
各列に、列ごとに、.TdC1,.TdC2,.TdC3とクラス名が付いています。
また、
各行に、行ごとに、.TdR1,.TdR2,.TdR3とクラス名が付いています。
各セルに付いている、id名
各セルにテーブルを作成したdivの「id名+Td+行列番号」と、いうid名が付いています。
例)2×3 セル #tbl4DivTd2_3 となります。
属性を設定する方法は２つあります。
１．スタイルシートで設定する。
各セルに付いている、class名
各列に、列ごとに、.TdC1,.TdC2,.TdC3とクラス名が付いています。
また、
各行に、行ごとに、.TdR1,.TdR2,.TdR3とクラス名が付いています。
各セルに付いている、id名
各セルにテーブルを作成したdivの「id名+Td+行列番号」と、いうid名が付いています。
例)2×3 セル #tbl4DivTd2_3 となります。
属性を設定する方法は２つあります。
１．スタイルシートで設定する。
#tbl4Div .TdC1{ //列１の制御
width:100px;
background-color:lavender;
}
#tbl4Div .TdR1{ //行１の制御
background-color:lightpink;
}
２．jqueryでセレクタを操作する。width:100px;
background-color:lavender;
}
#tbl4Div .TdR1{ //行１の制御
background-color:lightpink;
}
$("#tbl4Div tr").eq(7).css({"height":"105px","background-color":"red"});
//８行目（０から数えて７番目）の高さを制御。
//"background-color"は無視される。理由は、styleによるtdの設定の方が優先されるため。
$("#tbl4Div tr").eq(8).children("td").css({"background-color":"red"});
//このように指定すれば、特定行の全てのtdを制御できる。つまり、行を制御できる。
//以下、idによる指定の例
$("#tbl4DivTd3_1").css({"width":"10px"});
$("#tbl4DivTd6_4").css({"background-color":"red"});
//８行目（０から数えて７番目）の高さを制御。
//"background-color"は無視される。理由は、styleによるtdの設定の方が優先されるため。
$("#tbl4Div tr").eq(8).children("td").css({"background-color":"red"});
//このように指定すれば、特定行の全てのtdを制御できる。つまり、行を制御できる。
//以下、idによる指定の例
$("#tbl4DivTd3_1").css({"width":"10px"});
$("#tbl4DivTd6_4").css({"background-color":"red"});
ＤＬ
jqManTblStruct.jsをDL