WebScripter.jpをご覧頂きありがとうございます。
このサイトについてご意見などあればお気軽にメッセージをお送り下さい。お待ちしています。



captcha

Technical note

PHP、Javascriptで動的に表組を生成する。おまけでActionscriptの方法も。

2009.08.11

javascriptやphpで時々動的にHTMLのテーブルを生成する事があるのだが、いつも忘れてしまうのでここいらでちゃんとまとめておこうと思う。おまけでActionScriptの場合の方法も。

PHPの場合

PHP
<?php
/* 表示用サンプルデータ */
$itemArray = array(
 'apple',
 'orange',
 'peach',
 'pear',
 'grape',
 'pineapple'
);

/*== 変数の設定 ================*/

/* アイテムの総数 */
$itemNum = count($itemArray);
/* 1行あたりの列の数 */
$cols = 5;
/*行数を割り出し */
$rows = ceil($itemNum/$cols);
/* 変数 $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
//表示用サンプルデータ
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>&nbsp;</td>\n";
   }
  }
  html += "</tr>\n";
 }
 html += "</table>\n";
//出力
document.write(html);

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);