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

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

ただいまの
回答率

91.32%

  • PHP

    15239questions

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

  • JavaScript

    11288questions

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

  • HTML5

    2859questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

tableの中の列をクリックすると、詳細画面へ飛ばす方法がわからないです

受付中

回答 2

投稿 2017/05/17 11:47 ・編集 2017/05/20 02:14

  • 評価
  • クリップ 0
  • VIEW 243
退会済みユーザー

退会済みユーザー

前提・実現したいこと

追記:以下内容でこのページは遷移できたのですが、別のページも同じようにしたら文字化けが起こるのと、二行目以降の一覧データが入っていないようなエラーが起こっています。

$i = 0;
while($row = mysqli_fetch_row($result)){
$engineer_id = $row[0];
$engineer_name = $row[1];
$entry_day = $row[2];とした時に、この中の変数を二回以上使うと何かエラーが起こるのでしょうか?

また、<script type="text/javascript">
function moveDetail(number) {
document.frmMoveDetail.engineer_id.value=number;
document.frmMoveDetail.submit();
}
</script>の意味がよくわかっておらず、意味を教えていただければと思いました。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

以下前回の質問
〜〜〜

PHPとmysqlを利用して対象のデータベーステーブルから情報一覧をtableで表示します。
そして、tableの行をクリックすると、対象の行がhoverにより色が変わって、対象の内容の詳細画面へ飛ぶというシステムを作っています。

ただ、調べたところjavascriptを利用した方法があるようなのですが、どう移動させていいか全くわかりません。

〜〜〜

該当のソースコード

今回の動作しないコード↓


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>一覧</title>
<style type="text/css">
   .list {
      border : blue;
      border-style : solid;
      width:1200px;
   }
   .list td {
      border-top:solid 1px;
      border-top:solid 1px;
      line-height:18px;

   }
   .list tr:hover {
      background-color:red;
   }
</style>
<body>
<table>
    <tr>
     <th>エンジニア番号</th><th>技術者名</th><th>入社日</th>
    </tr>
    <#ENGINEERLIST#>//phpで変換予定
    <form method="post" id="frmMoveDetail" name="frmMoveDetail" action="engineer_detail.php">

      <input type="hidden" id="engineer_id" name="engineer_id" value="<#ENGINEERID#>">
  </form>
</body>
<script type="text/javascript">
   function moveDetail(number) {
       document.frmMoveDetail.engineer_id.value=number;
       document.frmMoveDetail.submit();
   }
</script>
</html>




<?php

$link=mysqli_connect(DB_SERVER,DB_ACCOUNT_ID,DB_ACCOUNT_PW,DB_NAME);
if (!$link) {
   echo "接続エラー"
   exit;
}
mysqli_set_charset($link,"utf8");//utf8にセット

$query = 'select * from engineer_info where 1 order by engineer_id';


$engineer_line = "";//変数を初期化する

if($result = mysqli_query($link,$query)){

  $i = 0;
  while($row = mysqli_fetch_row($result)){
    $engineer_id = $row[0];
    $engineer_name = $row[1];
    $entry_day = $row[2];


    $engineer_line.="<tr onclick='moveDetail(".$engineer_id[$i].")'><td>".$engineer_id[$i]."</td>
    <td>".$engineer_name[$i]."</td>
    <td>".$entry_day[$i]."</td></tr>\n";

    $i++;

    }
    mysqli_free_result($result);
  }
  mysqli_close($link);



  $fp = fopen('./engineer_list.html','r');//htmlを読み込み

  while(!feof($fp)){

    $html_line = fgets($fp);
    $html_line1 = str_replace('<#LOGINNAME#>',$shain_mei,$html_line);
    $html_line2 = str_replace('<#ENGINEERID#>','.$engineer_id.',$html_line1);
    $lines = str_replace('<#ENGINEERLIST#>',$engineer_line,$html_line2);

    echo $lines;
  }
  fclose($fp);
  exit();
?>




以下前回質問をさせていただき遷移できた方法↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>情報一覧</title>
<style type="text/css">
   .list {
      border : blue;
      border-style : solid;
      width:1200px;
   }
   .list td {
      border-top:solid 1px;
      border-top:solid 1px;
      line-height:18px;

   }
   .list tr:hover {
      background-color:red;
   }
</style></head>
<body>
 <header>
   <div class="header-right"><#LOGINNAME#>がログイン中</div>
 </header>

 <div class="center">
  <h1>情報一覧</h1>
</div>
  <table class="list">
    <tr>
     <th>契約名</th><th>技術者</th><th>パートナー</th><th>業務概要</th><th>作業場所</th>
     <th>契約金額</th><th>支払いサイト</th><th>契約開始時期</th><th>契約終了時期</th><th>その他備考</th>
    </tr>

    <#CONTRACTLIST#>

    <form method="post" id="frmMoveDetail" name="frmMoveDetail" action="contract_detail.php">
      <input type="hidden" id="contract_id" name="contract_id" value="">
  </form>
</body>
<script type="text/javascript">
   function moveDetail(number) {
       document.frmMoveDetail.contract_id.value=number;
       document.frmMoveDetail.submit();
   }
</script>
</html>





 <?php

 require_once('./database_config.php');

 $link=mysqli_connect(DB_SERVER,DB_ACCOUNT_ID,DB_ACCOUNT_PW,DB_NAME);
 if (!$link) {
    echo "エラー";
    exit;
 }

 mysqli_set_charset($link,"utf8");

//contract_infoというテーブルから、契約情報をcontract_id順に抽出

 $query='select * from contract_info where 1 order by contract_id';


 $line="";

 if ($result = mysqli_query($link, $query)) {

//テーブルの中身を1行ずつ取り出して、変数にセット

      $i=0;
      while ($row = mysqli_fetch_row($result)) {
         $contract_id[$i] = $row[0];
         $contract_name[$i] = $row[1];
         $engineer_name[$i] = $row[2];
         $partner_name[$i] = $row[3];
         $overview[$i] = $row[4];
         $place[$i] = $row[5];
         $contract_money[$i] = $row[6];
         $payment_site[$i] = $row[7];
         $contract_start_term[$i] = $row[8];
         $contract_end_term[$i] = $row[9];
         $memo[$i] = $row[10];

         // 一覧用の値をセットして、これを<#CONTRACTLIST#>というものに入れ替えたいです

         $line.="<tr><td>".$contract_name[$i]."</td><td>".$engineer_name[$i]."</td>
 <td>".$partner_name[$i]."</td><td>".$overview[$i]."</td><td>".$place[$i]."</td>
 <td>".$contract_money[$i]."</td><td>".$payment_site[$i]."</td>
 <td>".$contract_start_term[$i]."</td><td>".$contract_end_term[$i]."</td>
 <td>".$memo[$i]."</td><td><input type='submit' value='info' onclick='mov
eDetail(".$contract_id[$i].")' /></td></tr>\n";
         $i++;


      }
      mysqli_free_result($result);
 }

  mysqli_close($link);


  $fp=fopen('./contract_list.html','r');

  while(!feof($fp)) {
     $html_line=fgets($fp);

     $html_line1 = str_replace('<#LOGINNAME#>',$shain_mei,$html_line);
     $lines=str_replace("<#CONTRACTLIST#>",$line,$html_line1);
     echo $lines;
  }

  fclose($fp);

  exit();

  ?>

試したこと

<tr onclick='moveDetail(".$engineer_id[$i].")'><td>".$engineer_id[$i]."</td><td>".$engineer_name[$i]."</td>
に対してPHP Notice:  Uninitialized string offset: 1 in /home/vagrant/contract_kadai2/engineer_list.php on line 40というエラーが起こっているため、ここあたりのengineer_id[$i]がうまく機能していない?と思い、いじって見ましたが変化ない状態です。

また、ターミナルから直接insert intoにして追加しても一つ目の行のデータにはid番号が表示されますが、二行目以降がidが表示されなくなります。
以下二つデータがある中でソースを確認した時の表示です。
moveDetail()にidが入っていない。

かつ�と文字化けが起こる。
ただ、一つ目の行をクリックして詳細画面へ行くと、文字化けも起こらずに、一つ目のidのデータが抽出されて出てきていました。

<tr onclick='moveDetail(1)'><td>1</td>
<td>�</td>
<td>2</td><td>�</td></tr>
<tr onclick='moveDetail()'><td></td>
<td>�</td>
<td>0</td><td>�</td></tr>

補足情報(言語/FW/ツール等のバージョンなど)

macbook利用、local環境にてテスト中です。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

+4

こう書けばたぶん動くと思う。

         $line.="<tr onclick='moveDetail(".$contract_id[$i].")'>
 <td>".$contract_name[$i]."</td><td>".$engineer_name[$i]."</td>
 <td>".$partner_name[$i]."</td><td>".$overview[$i]."</td><td>".$place[$i]."</td>
 <td>".$contract_money[$i]."</td><td>".$payment_site[$i]."</td>
 <td>".$contract_start_term[$i]."</td><td>".$contract_end_term[$i]."</td>
 <td>".$memo[$i]."</td></tr>\n";

投稿 2017/05/17 11:55

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/05/17 12:34

    kei344様、ありがとうございます。上記のようにしたら行をクリックして飛ぶことができました。
    ですが、ここで問題が出まして、詳細画面に飛んでも各対象の詳細データが表示されない状態が起こっております。

    contract_detail.phpにて$contract_id = $_GET['contract_id']として、受け取ってと考えていたのですが、データを引っ張って来れておりません。以下内容では間違っていますでしょうか?

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>情報詳細</title>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    <header>
    <div class="container">
    <div class="header-left">管理業務</div>
    <div class="header-right"><#LOGINNAME#>がログイン中</div>
    </div>
    </header>
    <div class="btn-wrapper">
    <a href="login.php" class="btn logout-right">ログアウト</a>
    </div>
    <div class="container">
    <div class="center">
    <h1>情報詳細</h1>
    </div>
    <table class="tb">
    <tr>
    <td class="td-detail">契約名</td>
    <td><#CONTRACTNAME#></td>
    </tr>
    <tr>
    <td class="td-detail">技術者名</td>
    <td><#ENGINEERNAME#></td>
    </tr>
    <tr>
    <td class="td-detail">パートナー名</td>
    <td><#PARTNERNAME#></td>
    </tr>
    <tr>
    <td class="td-detail">業務概要</td>
    <td><#OVERVIEW#></td>
    </tr>
    <tr>
    <td class="td-detail">作業場所</td>
    <td><#PLACE#></td>
    </tr>
    <tr>
    <td class="td-detail">契約金額</td>
    <td><#CONTRACTMONEY#>円</td>
    </tr>
    <tr>
    <td class="td-detail">支払いまでの日付</td>
    <td><#PAYMENTDAY#>日</td>
    </tr>
    <tr>
    <td class="td-detail">契約開始時期</td>
    <td><#STARTDATE#></td>
    </tr>
    <tr>
    <td class="td-detail">契約終了時期</td>
    <td><#ENDDATE#></td>
    </tr>
    <tr>
    <td class="td-detail">その他備考</td>
    <td><#MEMO#></td>
    <tr>
    <td style="border-style:none;text-align:center;" colspan="2">
    <input type="button" style="width:120px;" onclick="history.back()" value="戻る">
    </td>
    </tr>
    </table>
    </div>
    </body>
    </html>


    <?php

    try{

    $contract_id = $_GET['contract_id'];

    $dsn = 'mysql:host=localhost;dbname=[データベース名];charset=utf8';
    $user = 'ユーザー名';
    $password = 'パスワード';

    $dbh = new PDO($dsn,$user,$password);
    $dbh->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
    $sql = 'select contract_id,contract_name,engineer_name,
    partner_name,overview,place,contract_money,
    payment_site,contract_start_term,
    contract_end_term,memo from contract_info where contract_id = ?';

    $stmt = $dbh->prepare($sql);

    $data[] = $contract_id;

    $stmt->execute($data);

    $rec = $stmt->fetch(PDO::FETCH_ASSOC);

    $contract_id = $rec['contract_id'];
    $contract_name = $rec['contract_name'];
    $engineer_name = $rec['engineer_name'];
    $partner_name = $rec['partner_name'];
    $overview = $rec['overview'];
    $place = $rec['place'];
    $contract_money = $rec['contract_money'];
    $payment_site = $rec['payment_site'];
    $contract_start_term = $rec['contract_start_term'];
    $contract_end_term = $rec['contract_end_term'];
    $memo = $rec['memo'];

    $dbh = null;


    $fp = fopen('./contract_detail.html','r');

    while(!feof($fp)){

    $line = fgets($fp);

    $line1 = str_replace('<#LOGINNAME#>',$shain_mei,$line);
    $line2 = str_replace('<#CONTRACTNAME#>',$contract_name,$line1);
    $line3 = str_replace('<#ENGINEERNAME#>',$engineer_name,$line2);
    $line4 = str_replace('<#PARTNERNAME#>',$partner_name,$line3);
    $line5 = str_replace('<#OVERVIEW#>',$overview,$line4);
    $line6 = str_replace('<#PLACE#>',$place,$line5);
    $line7 = str_replace('<#CONTRACTMONEY#>',number_format($contract_money),$line6);
    $line8 = str_replace('<#PAYMENTDAY#>',$payment_site,$line7);
    $line9 = str_replace('<#STARTDATE#>',$contract_start_term,$line8);
    $line10 = str_replace('<#ENDDATE#>',$contract_end_term,$line9);
    $line11 = str_replace('<#MEMO#>',$memo,$line10);
    $line12 = str_replace('<#CONTRACTID#>',$contract_id,$line11);



    $lines = $line12;
    echo $lines;

    }

    fclose($fp);

    exit();

    } catch(Exception $e){

    print 'エラー';
    exit();

    }

    何から何までご質問してしまって申し訳ございません。

    キャンセル

  • 2017/05/17 15:14

    きちんとパラメータが送れているかどうかと、パラメータが来た場合表示できるかをそれぞれ検証してみてください。

    【Chrome デベロッパーツール Networkパネルの使い方 | Web Tips】
    http://weback.net/utility/1491/

    また、コメント欄ではマークダウンが使えないため、コードについては質問文に追記されるほうが読みやすいと思います。(決して元のコードを消さないでください)

    キャンセル

  • 2017/05/20 02:18

    コードをコメントに長く記載してしまい、申し訳ありませんでした。
    前回のを別のページに再利用しようとしたところ、エラーが起こってしまって文字化けなども出てしまっています。
    いまいち関数を自ら作って置きながら、内容がきちんと理解できておらず申し訳ありませんが、どの点を改善するべきなのでしょうか?

    キャンセル

  • 2017/05/21 02:14

    > どの点を改善するべきなのでしょうか?
    エラー文を読んでエラーで指摘されている問題を修正したほうが良いですよ。

    キャンセル

+1

可能であれば、javascriptより構造として処理したほうがよいと思います

<style>
table{border-collapse:collapse;}
th,td{border:1px solid #000000;}
.num{text-align:right;}
.shosai{display:inline;}
</style>
<table>
<thead>
<tr>
<th>id</th>
<th>名前</th>
<th>数量</th>
<th>詳細</th>
</tr>
</tr>
</thead>
<tbody>
<tr>
<td class="num">1</td>
<td>hoge</td>
<td class="num">100</td>
<td><form class="shosai"><input type="hidden" name="id" value="1"><input type="submit" value="go"></form></td>
</tr>
<tr>
<td class="num">2</td>
<td>fuga</td>
<td class="num">200</td>
<td><form class="shosai"><input type="hidden" name="id" value="2"><input type="submit" value="go"></form></td>
</tr>
<tr>
<td class="num">3</td>
<td>piyo</td>
<td class="num">1,000</td>
<td><form class="shosai"><input type="hidden" name="id" value="3"><input type="submit" value="go"></form></td>
</tr>
</tr>

※hiddenしたname=idのvalueはサーバー側から渡してやる

投稿 2017/05/17 12:14

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

ただいまの回答率

91.32%

関連した質問

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

  • PHP

    15239questions

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

  • JavaScript

    11288questions

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

  • HTML5

    2859questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。