PHP、Javascriptで動的に表組を生成する。おまけでActionscriptの方法も。
：
：2009.08.11
：
：0件
javascriptやphpで時々動的にHTMLのテーブルを生成する事があるのだが、いつも忘れてしまうのでここいらでちゃんとまとめておこうと思う。おまけでActionScriptの場合の方法も。
PHPの場合
PHP:
-
<?php
-
/* 表示用サンプルデータ */
-
'apple',
-
'orange',
-
'peach',
-
'pear',
-
'grape',
-
'pineapple'
-
);
-
-
/*== 変数の設定 ================*/
-
-
/* アイテムの総数 */
-
/* 1行あたりの列の数 */
-
$cols = 5;
-
/*行数を割り出し */
-
/* 変数 $html の初期化 */
-
$html = "";
-
-
/*==== 表組の生成 ================*/
-
-
$html .= "<table border=\"1\">\n";
-
for($i = 0; $i <$rows; $i++){
-
/* 行が追加されるたびに列の数 $colsを足す */
-
$sequence = $i*$cols;
-
$html .= "<tr>;\n";
-
for($t = 0; $t <$cols; $t++){
-
if(($sequence+$t) <= $itemNum-1) {
-
/* $itemNumの範囲内であれば$itemArrayの内容を返す */
-
$html .= "<td>".$itemArray[$sequence+$t]."</td>\n";
-
}else{
-
/* $itemNumの範囲外であれば空白文字を返す */
-
$html .= "<td> </td>\n";
-
}
-
}
-
$html .= "</tr>\n";
-
}
-
$html .= "</table>\n";
-
-
/* 出力 */
-
print $html;
-
?>
JavaScriptの場合
JAVASCRIPT:
-
<script type="text/javascript">
-
//表示用サンプルデータ
-
var itemArray = new Array(
-
'apple',
-
'orange',
-
'peach',
-
'pear',
-
'grape',
-
'pineapple'
-
);
-
-
//==== 変数の設定 ================
-
-
//アイテムの総数
-
var itemNum = itemArray.length;
-
//1行あたりの列の数
-
var cols = 5;
-
//行数を割り出し
-
var rows = Math.ceil(itemNum/cols);
-
//変数 $html の初期化
-
var html = "";
-
-
//==== 表組の生成 ================
-
-
html += "<table border=\"1\">\n";
-
for(var i = 0; i <rows; i++){
-
// 行が追加されるたびに列の数 $colsを足す
-
var sequence = i*cols;
-
html += "<tr>\n";
-
for(t = 0; t <cols; t++){
-
//$itemNumの範囲内であれば$itemArrayの内容を返す
-
if((sequence+t) <= itemNum-1) {
-
html += "<td>"+itemArray[sequence+t]+"</td>\n";
-
}else{
-
//$itemNumの範囲外であれば空白文字を返す
-
html += "<td> </td>\n";
-
}
-
}
-
html += "</tr>\n";
-
}
-
html += "</table>\n";
-
-
//出力
-
document.write(html);
-
</script>
PHP、JavaScriptとも言語による命令の記述が違うだけで、流れはほとんど変わりませんね。
おまけーActionScriptの場合
あらかじめ mc1という正方形のムービークリップシンボルを作成しておきます。記述がAS2.0ですが…_(..)_
ムービークリップ base はなくてもいいとは思います。
ACTIONSCRIPT:
-
//配置される空のムービークリップ base を配置
-
var base = _root.createEmptyMovieClip("base", 0);
-
-
//==== 変数の設定 ================
-
//アイテムの総数
-
itemNum = 13;
-
//1行あたりの列の数
-
var cols = 5;
-
//行数を割り出し
-
var rows = Math.ceil(num/cols);
-
//配置するムービークリップの幅、高さ
-
mcW = 90;
-
mcH = 90;
-
-
//==== ムービークリップの配置 ================
-
for(var i = 0; i <rows; i++) {
-
var sequence = i*cols;
-
for (var t = 0; t <cols; t++){
-
var mcNum = "mc" +(sequence+t);
-
var mcX = (mcW+5)*t;
-
var mcY = (mcH+5)*i;
-
_root.base.attachMovie("mc1",mcNum, (sequence+t),{_x:mcX, _y:mcY});
-
if((sequence+t)>= itemNum-1) {
-
break;
-
}
-
}
-
}
-
//ムービークリップ base をステージの中央に配置
-
base._x = 0;
-
base._y = (Stage.height/2) - (base._height/2);
コメント/トラックバック
トラックバックURL
この投稿へのコメント/トラックバックはありません。
コメントする