詳細情報を表示するPHP内のJavaScript関数

以下のコードは、顧客情報を保持するローカルデータベースに接続されています。まず、ページには顧客名と国名が表示されますが、名前をクリックするとその特定の顧客に関する詳細情報が表示されます。詳細情報を表示するPHP内のJavaScript関数

このコードの問題は、クリックされた名前に関係なく、常に最初の顧客情報のみが表示されることです。私はどこに間違っているかもしれないか誰にでも見える？各ボタン（顧客名）のIDを作成する必要がありますか？データベースには多くの顧客がいることを念頭に置いてください。特に、データベースが変更された場合は、それぞれのIDを実装するのが非常に難しいと感じています。

<DOCTYPE html!> 
<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="a3.css"> 
</head> 
<body> 
    <div class="nav"> 
     <?php include 'nav.php'; 
     ?> 
    </div> 
    <?php include 'dbconfig.php'; 
    $sql ='SELECT * FROM `customers` ORDER BY `customers`.`country` ASC'; 
    $q = $conn->query($sql); 
    $q->setFetchMode(PDO::FETCH_ASSOC); 
    ?> 
    <div class = "main"> 
     <table> 
      <?php while ($r = $q->fetch()): ?> 
       <tr> 
        <td><button onclick = "showCustomer();"/><?php echo ($r['customerName'])?></td> 
        <td><?php echo ($r['country'])?></td> 
       </tr> 
       <tr id ="extra" style="display:none"> 
        <td><?php echo ($r['customerNumber'])?></td> 
        <td><?php echo ($r['contactLastName'])?></td> 
        <td ><?php echo ($r['contactFirstName'])?></td> 
        <td><?php echo ($r['phone'])?></td> 
        <td><?php echo ($r['addressLine1'])?></td> 
        <td><?php echo ($r['addressLine2'])?></td> 
        <td><?php echo ($r['city'])?></td> 
        <td><?php echo ($r['state'])?></td> 
        <td><?php echo ($r['postalCode'])?></td> 
        <td><?php echo ($r['salesRepEmployeeNumber'])?> </td> 
        <td><?php echo ($r['creditLimit'])?></td> 
       </tr> 
      <?php endwhile; ?> 
     </table> 
     </div> 

     <div class="foot"> 
     <?php include 'foot.php'; ?> 
     </div> 
     <script> 



     function showCustomer() { 
      var showForm=document.getElementById('extra'); 
      if (showForm.style.display="none") { 

       showForm.style.display =""; 
       alert('ok'); 
       console.log(showForm); 
      } 
      else if (showForm.style.display=""){ 
       showForm.style.display ="none"; 
      } 
     } 
    </script> 
</body> 
</html> 
</DOCTYPE>

出典

2016-04-19 Shauna

IDは一意である必要があります。各隠し要素の一意のIDを生成し、一意のIDをjavascript関数に渡します。 –

'' '' 'の要素は、PHPの' 'while''ループ内に作成されています。したがって、10人の顧客がいる場合、同じIDを持つ10個の '' '' '要素が余分にある – kkaosninja

whileループの外にテーブルを作成する必要がありますか？私は50人以上の顧客を持っています。これはそれぞれのためのテーブルを作ることを意味しないでしょうか？ – Shauna

あなたのすべての<tr>は同じid="extra"を持っています。私が変数$i（18行目）を作成したのは、while（行20）の直後に増加し、showCustomerの呼び出しでパラメータとして挿入されたものです最後に、関数showCustomerが宣言されている場合、id "extra"の最後にパラメータ "index"が挿入されます。

<DOCTYPE html!> 
<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="a3.css"> 
</head> 
<body> 
    <div class="nav"> 
     <?php include 'nav.php'; 
     ?> 
    </div> 
    <?php include 'dbconfig.php'; 
    $sql ='SELECT * FROM `customers` ORDER BY `customers`.`country` ASC'; 
    $q = $conn->query($sql); 
    $q->setFetchMode(PDO::FETCH_ASSOC); 
    ?> 
    <div class = "main"> 
     <table> 
      <?php $i = 0; 
        while ($r = $q->fetch()): 
        $i++;   // UNIQUE INDEX FOR EACH CUSTOMER. 
      ?> 
       <tr> 
        <td><button onclick = "showCustomer('<?php echo $i;?>');"/> 
          <?php echo ($r['customerName'])?></td> 
        <td><?php echo ($r['country'])?></td> 
       </tr> 
       <tr id ="extra<?php echo $i;?>" style="display:none"> 
        <td><?php echo ($r['customerNumber'])?></td> 
        <td><?php echo ($r['contactLastName'])?></td> 
        <td ><?php echo ($r['contactFirstName'])?></td> 
        <td><?php echo ($r['phone'])?></td> 
        <td><?php echo ($r['addressLine1'])?></td> 
        <td><?php echo ($r['addressLine2'])?></td> 
        <td><?php echo ($r['city'])?></td> 
        <td><?php echo ($r['state'])?></td> 
        <td><?php echo ($r['postalCode'])?></td> 
        <td><?php echo ($r['salesRepEmployeeNumber'])?> </td> 
        <td><?php echo ($r['creditLimit'])?></td> 
       </tr> 
      <?php endwhile; ?> 
     </table> 
     </div> 

     <div class="foot"> 
     <?php include 'foot.php'; ?> 
     </div> 
     <script> 



     function showCustomer(index) { // UNIQUE INDEX AS PARAMETER. 
      var showForm=document.getElementById('extra' + index); // USING INDEX. 
      if (showForm.style.display="none") { 

       showForm.style.display =""; 
       alert('ok'); 
       console.log(showForm); 
      } 
      else if (showForm.style.display=""){ 
       showForm.style.display ="none"; 
      } 
     } 
    </script> 
</body> 
</html> 
</DOCTYPE>

出典

2016-04-19 17:58:31

ありがとうございました。 – Shauna

詳細情報を表示するPHP内のJavaScript関数

答えて

関連する問題