質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • PHP

    24054questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    20417questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8157questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

PHPのfor文のループの中でJqueryを使用したいのですが、、

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 742

SugiuraY

score 202

お世話になっております。

【現状のご説明】
1) user.phpでユーザの選択したradioボタンにより$POSTにより値を受け取る
2) 同じページ内に受け取った値にひもづく情報をMYSQLから取得する(複数行(複数の要素を含む配列)が取得される)
3) 当該複数行の情報をテーブルで同じページ内で表示している
4) chart.jsというJQUERYを利用して、モーダルウィンドウで複数行のそれぞれの情報をグラフで表示する

【問題点】
chart.jsとでグラフを表示させる際のスクリプトにおいて、POSTで取得したそれぞれの行を特定する変数を使用したいと考えております。
下記のコードで申し上げるとuser.phpのfor文が複数行をテーブルで表示させるコードになりますが、
イメージとして//ここにJSをいれたい!という箇所に、graph.jsを入れるのですが、その中の

data: ["<?php echo $resultact[$k][21];?>", "<?php echo $resultact[$k][23];?>",
"<?php echo $resultact[$k][25];?>", "<?php echo $resultact[$k][26];?>"],

もループにいれて、それぞれの行毎のグラフを描きたいと考えております。
for文の中出なければ$kがループしてくれないので、php(for)の中に無理やりJSコードを記載しようと考えています。

【質問】
このJSのスクリプトをphpのなかに組み込むためにすべて、for文の中で print "XXX";として
すべて書き込むのはあまり賢いやり方ではないような気がしていますが、
通常、このような場合(PHPの中でjsを使用し、jsにphpの変数を渡すようなコードを書く場合)どのようにコーディングすべきかアドバイスをいただけますでしょうか。

あまり、上手に質問を差し上げれていないかもしれないので、至らない点があれば、ご指摘ください。
宜しくお願い申し上げます。

user.php


for ($k=0; $k <count($resultact) ; $k++) {

$aa=$resultact[$k][5];
#preg_match('/(北海道|青森県|岩手県|宮城県|秋田県|山形県|福島県|茨城県|栃木県|群馬県|埼玉県|千葉県|東京都|神奈川県|新潟県|富山県|石川県|福井県|山梨県|長野県|岐阜県|静岡県|愛知県|三重県|滋賀県|京都府|大阪府|兵庫県|奈良県|和歌山県|鳥取県|島根県|岡山県|広島県|山口県|徳島県|香川県|愛媛県|高知県|福岡県|佐賀県|長崎県|熊本県|大分県|宮崎県|鹿児島県|沖縄県|マレーシア)/',
#$resultact[$k][12],$matching);//住所
#$bb=$matching[0];
$cc=number_format($resultact[$k][21]);//取得価額
$dd=number_format($resultact[$k][23]);//取得時評価
$ee=number_format($resultact[$k][25]);//期末評価
$ff=number_format($resultact[$k][26]);//期末帳簿価額
$gg=$resultact[$k][30]."%";//稼働率
$hh=number_format($resultact[$k][32]+$resultact[$k][33]);//賃貸事業収益等
$ii=number_format($resultact[$k][34]);//賃貸事業費用等
if (!isset($ii)) {
  $ii=0;
$jj=number_format($resultact[$k][46]);//賃貸事業損益
$kk=number_format($resultact[$k][47]);//NOI

print "<tr>\n";
print
"<td>".($k+1)."</td>"."<td>".$aa."</td>"
."<td style=\"text-align:right\">".$cc."</td>"."<td style=\"text-align:right\">".$dd."</td>"."<td style=\"text-align:right\">".$ee."</td>"
."<td style=\"text-align:right\">".$ff."</td>"."<td style=\"text-align:right\">".$gg."</td>"."<td style=\"text-align:right\">".$hh."</td>"
."<td style=\"text-align:right\">".$ii."</td>"."<td style=\"text-align:right\">".$jj."</td>"."<td style=\"text-align:right\">".$kk."</td>"
."</td>"."<td style=\"text-align:center\">"."<div class=\"box\"><a data-target=\"modal1\" class=\"modal-open\">"."<i class=\"fa fa-bar-chart\"></i>"."</a></div>"."</td>";
    print "</tr>\n";


   print "<div id=\"modal1\" class=\"modal-content\">"
   print "<div style=\"width:500px;\">"
    print " <canvas id=\"myChart\" width=\"400\" height=\"400\"></canvas>";
print "<script>";

//ここにJSをいれたい!

print "</script>";
   print "  </div>";
  print "   <a class="modal-close">×</a>";
   print "  </div>";



}
graph.js


      var ctx = document.getElementById("myChart");
      var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
              labels: ["取得価額", "取得時評価額", "期末評価額","期末簿価"],
              datasets: [{
                  //label: '# of Votes',
                  data: ["<?php echo $resultact[$k][21];?>", "<?php echo $resultact[$k][23];?>",
                  "<?php echo $resultact[$k][25];?>", "<?php echo $resultact[$k][26];?>"],
                  backgroundColor: [
                      '#ffc4d1',
                      '#c2e6ff',
                      '#ffe4a3',
                      '#b5ffd7'
                  ],
                  borderColor: [
                      '#ffc4d1',
                '#c2e6ff',
                        '#ffe4a3',
                    '#b5ffd7'
                  ],
                  borderWidth: 1,

              }]
          },
          options: {

                      tooltips: {
                  callbacks: {
                        label: function(tooltipItem, data) {
                            var value = data.datasets[0].data[tooltipItem.index];
                            value = value.toString();
                            value = value.split(/(?=(?:...)*$)/);
                            value = value.join(',');

                            return value;
                        }
                  } // end callbacks:
                }, //end tooltips
                scales: {
                        yAxes: [{
                  labelstring:"<%=value%>円",
                        ticks: {
                            beginAtZero:true,
                            userCallback: function(value, index, values) {
                                // Convert the number to a string and splite the string every 3 charaters from the end
                                value = value.toString();
                                value = value.split(/(?=(?:...)*$)/);
                                value = value.join(',');
                                return value;
                            }
                        }
                    }],

              }
          }
      });
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

解決されているようですが、テーブルの行ごとにscriptを置くやり方ではなく、まとめてやったほうがコードもすっきりすると思います。

下記の show 関数の中にChartを作るための物をまとめておいて、行ごとに実行するイメージです。

<table>
<tr><td>1a</td><td>1b</td><td>1c</td><td>1d</td><td>1e</td></tr>
<tr><td>2a</td><td>2b</td><td>2c</td><td>2d</td><td>2e</td></tr>
<tr><td>3a</td><td>3b</td><td>3c</td><td>3d</td><td>3e</td></tr>
<tr><td>4a</td><td>4b</td><td>4c</td><td>4d</td><td>4e</td></tr>
<tr><td>5a</td><td>5b</td><td>5c</td><td>5d</td><td>5e</td></tr>
</table>
function show( a, b, c, d, e ) {
    console.log( a, b, c, d, e );
}
$( ()=> {
    $( 'tr' ).each( ( i, ele )=> {
        let a = [];
        $( ele ).find( 'td' ).each( ( i, ele )=> {
            a.push( $( ele ).text() );
        } );
        show( a[ 0 ], a[ 1 ], a[ 2 ], a[ 3 ], a[ 4 ] );
    } );
} );

動くサンプル:https://jsfiddle.net/0xfn95L9/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

+1

htmlの先頭の方で予めデータをつくっておいて処理するか
htmlを読み終わった後にajaxでデータを取りに行き、取得後表示するか
のどちらかではないでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/07 18:48

    ご回答頂き、誠にありがとうございます。
    >htmlの先頭の方で予めデータをつくっておいて処理する
    すこし、この方法がぴんと来なかったのですが、恐れ入りますが、内容をご教示願えますでしょうか?

    例えば一行目と二行目(配列)が(単純化しますが)以下の場合
    $A=array("a","100","200");
    $B=array("b","1000","5000");
    for文で$A、$Bをテーブルに表示している状況かと思いますが、これをどのように先頭で処理すればそれぞれのテーブルの行に紐づく変数をJS側にも渡せるのでしょうか?
    ご教示を頂ければ幸甚です、宜しくお願い申し上げます。

    キャンセル

同じタグがついた質問を見る

  • PHP

    24054questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    20417questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8157questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。