WebScripter.jp » スクリプト全般 http://webscripter.jp HTML、CSS、Javascript、ActionScript、php、デザインなどWeb制作に関する備忘録 Sat, 16 Jan 2010 02:11:19 +0000 http://wordpress.org/?v=2.8.5 ja hourly 1 PHP、Javascriptで動的に表組を生成する。おまけでActionscriptの方法も。 http://webscripter.jp/script_all/post22/ http://webscripter.jp/script_all/post22/#comments Tue, 11 Aug 2009 03:51:26 +0000 huevo@ws http://webscripter.jp/?p=22 javascriptやphpで時々動的にHTMLのテーブルを生成する事があるのだが、いつも忘れてしまうのでここいらでちゃんとまとめておこうと思う。おまけでActionScriptの場合の方法も。

PHPの場合

PLAIN TEXT
PHP:
  1. <?php
  2. /* 表示用サンプルデータ */
  3. $itemArray = array(
  4.   'apple',
  5.   'orange',
  6.   'peach',
  7.   'pear',
  8.   'grape',
  9.   'pineapple'
  10. );
  11.  
  12. /*== 変数の設定 ================*/
  13.  
  14. /* アイテムの総数 */
  15. $itemNum = count($itemArray);
  16. /* 1行あたりの列の数 */
  17. $cols = 5;
  18. /*行数を割り出し */
  19. $rows = ceil($itemNum/$cols);
  20. /* 変数 $html の初期化 */
  21. $html = "";
  22.  
  23. /*==== 表組の生成 ================*/
  24.  
  25. $html .= "<table border=\"1\">\n";
  26. for($i = 0; $i <$rows; $i++){
  27. 　/* 行が追加されるたびに列の数 $colsを足す */
  28.   $sequence = $i*$cols;
  29.   $html .= "<tr>;\n";
  30.   for($t = 0; $t <$cols; $t++){
  31.     if(($sequence+$t) <= $itemNum-1) {
  32.       /* $itemNumの範囲内であれば$itemArrayの内容を返す */
  33.       $html .= "<td>".$itemArray[$sequence+$t]."</td>\n";
  34.     }else{
  35.       /* $itemNumの範囲外であれば空白文字を返す */
  36.       $html .= "<td>&nbsp;</td>\n";
  37.     }
  38.   }
  39.   $html .= "</tr>\n";
  40. }
  41. $html .= "</table>\n";
  42.  
  43. /* 出力 */
  44. print $html;
  45. ?>

出力結果サンプル

JavaScriptの場合

PLAIN TEXT
JAVASCRIPT:
  1. <script type="text/javascript">
  2. //表示用サンプルデータ
  3. var itemArray = new Array(
  4.   'apple',
  5.   'orange',
  6.   'peach',
  7.   'pear',
  8.   'grape',
  9.   'pineapple'
  10. );
  11.  
  12. //==== 変数の設定 ================
  13.  
  14. //アイテムの総数
  15. var itemNum = itemArray.length;
  16. //1行あたりの列の数
  17. var cols = 5;
  18. //行数を割り出し
  19. var rows = Math.ceil(itemNum/cols);
  20. //変数 $html の初期化
  21. var html = "";
  22.  
  23. //==== 表組の生成 ================
  24.  
  25. html += "<table border=\"1\">\n";
  26. for(var i = 0; i <rows; i++){
  27.   // 行が追加されるたびに列の数 $colsを足す
  28.   var sequence = i*cols;
  29.   html += "<tr>\n";
  30.   for(t = 0; t <cols; t++){
  31.     //$itemNumの範囲内であれば$itemArrayの内容を返す
  32.     if((sequence+t) <= itemNum-1) {
  33.       html += "<td>"+itemArray[sequence+t]+"</td>\n";
  34.     }else{
  35.       //$itemNumの範囲外であれば空白文字を返す
  36.       html += "<td>&nbsp;</td>\n";
  37.     }
  38.   }
  39.   html += "</tr>\n";
  40. }
  41. html += "</table>\n";
  42.  
  43. //出力
  44. document.write(html);
  45. </script>

出力結果サンプル

PHP、JavaScriptとも言語による命令の記述が違うだけで、流れはほとんど変わりませんね。

おまけーActionScriptの場合

あらかじめ mc1という正方形のムービークリップシンボルを作成しておきます。記述がAS2.0ですが…_(..)_
ムービークリップ base はなくてもいいとは思います。

PLAIN TEXT
ACTIONSCRIPT:
  1. //配置される空のムービークリップ base を配置
  2. var base = _root.createEmptyMovieClip("base", 0);
  3.  
  4. //==== 変数の設定 ================
  5. //アイテムの総数
  6. itemNum = 13;
  7. //1行あたりの列の数
  8. var cols = 5;
  9. //行数を割り出し
  10. var rows = Math.ceil(num/cols);
  11. //配置するムービークリップの幅、高さ
  12. mcW = 90;
  13. mcH = 90;
  14.  
  15. //==== ムービークリップの配置 ================
  16. for(var i = 0; i <rows; i++) {
  17.   var sequence = i*cols;
  18.   for (var t = 0; t <cols; t++){
  19.     var mcNum = "mc" +(sequence+t);
  20.     var mcX = (mcW+5)*t;
  21.     var mcY = (mcH+5)*i;
  22.     _root.base.attachMovie("mc1",mcNum, (sequence+t),{_x:mcX, _y:mcY});
  23.     if((sequence+t)>= itemNum-1) {
  24.       break;
  25.     }
  26.   }
  27. }
  28. //ムービークリップ base をステージの中央に配置
  29. base._x = 0;
  30. base._y = (Stage.height/2) - (base._height/2);

]]> http://webscripter.jp/script_all/post22/feed/ 0