2017-09-05 21 views
1

私はMySql DB(顧客情報を含んでいます)を持っていて、テーブルからデータを取り出して表示しています。私はテーブルに顧客名を表示します。クリック可能なデータを含むデータを含むクリック可能なHTMLテーブル

function customers(){ 
$servername = "localhost"; 
$username = "root"; 
$password = ""; 
$dbname = "gymdb"; 
$p = ''; 
// Create connection 
$conn = new mysqli($servername, $username, $password, $dbname); 
// Check connection 
if ($conn->connect_error) { 
    die("Connection failed: " . $conn->connect_error); 
} 

$sql = "SELECT * FROM company_customers WHERE company_id=" . $_SESSION['id'] . ";"; 
$result = $conn->query($sql); 

if ($result->num_rows > 0) { 
    $p .= ' 
     <hmtl> 
     <head> 

     </head> 
     <body> 
      <table class="container"> 
       <thead> 
        <tr> 
         <th><h1>Name</h1></th> 
         <th><h1>Surname</h1></th> 
         <th><h1>More Info</h1></th> 
        </tr> 
       </thead> 
    '; 
    while($row = $result->fetch_assoc()) { 
     $p .= ' 
       <tbody> 
         <tr> 
          <td style="width:50%">' . $row['customer_name'] . '</td> 
          <td>' . $row['customer_surname'] . '</td> 
          <td style="width:100px" class=thisone onclick="show()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; +</td> 
         </tr>    
       </tbody> 
      <script> 

      </script> 
      </body> 
      </html> 
      '; 
    } 
} else { 

} 
$conn->close();  
+0

2つのオプションがあります:a)最初に情報を取得し、cssで非表示にしてonclickを表示します。2)ajaxを使用してPHPサーバーとDBリクエストに新しいリクエストを行い、セルにロードします。あなたのshow()関数は何をしていますか? –

答えて

2

それはすべてが依存track.nowあなたが右にある:私は、その特定の行の追加情報ここで

コードを各テーブル行の内部で、ボタンをクリックして、表示できるようにしたいですどのようにそれらを表示したいですか?しかし、あなたの最善の策は、HTMLパーツの中に必要なすべての情報を基本情報と共に追加することです。クラス「隠された」またはそれに類似したクラスを追加します。ユーザーがボタンをクリックすると、同じ行のすべての.hidden要素を見つけてクラスを削除します。

別のオプションは、必要な情報だけをロードするためにajaxを使用することです。しかし、送信するデータがたくさんある場合を除いて、最初の解決策に固執します。また

、ダブルチェックあなたのclass=thisoneあなたは「続きを読む」ボタンのような何かをしたい場合、それはclass="thisone"

2

する必要があり、あなたがあなたの側にはほとんどJavaScriptを必要としています。ただし、HTML側では、ハイパーリンクである<a>で各表のセルを並べる必要があります。これはあなたのテーブルをクリックすると拡大します。

2
<td style="width:100px" 
    class=thisone onclick="show('.$row['customer_id'].');"> 

    <div class="hidden_content" style="display:none;" id="content_'.$row['customer_id'].'"> 
    ' . $row['customer_name'] . ' 
    </div> 
</td> 

次にあなたがショーの機能を実現する必要があります。

function show(id){ 
    document.getElementById('content_'+id).style.display='block'; 
} 

より良い意思決定は、単一のページに大量のデータを送信し、追加的なAjaxのクエリによって追加の情報を取得していません。

関連する問題