2017-07-17 18 views
-1

は、より多くの情報をクリックする必要があります...簡単なブートストラップモーダル詳細

私は現在、このコードがあります。

<?php 
$connection = new mysqli("localhost", "root", "", "simozar"); 
$sql = "SELECT * FROM customer"; 
$result = mysqli_query($connection, $sql); 
if (mysqli_num_rows($result) > 0) { 
    echo "<table dir='rtl' class='table table-bordered'> 
      <tr> 
       <td>name</td> 
       <td>job</td> 
       <td>phone number</td> 
      </tr>"; 
    while ($row = mysqli_fetch_assoc($result)) { 
     echo "<tr> 
       <td>$row[first_name] $row[last_name]</td> 
       <td>$row[job]</td> 
       <td>$row[phone_num]</td> 
       <td><button type='button' class='btn btn-info' data- 
        toggle='modal' data-target='#more_info'>show more info</button></td> 
       </tr>"; 
    } 
    echo "</table>"; 
} else { 
    echo "no information"; 
} 

$connection->close(); 
?> 


<div id="more_info" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-body"> 

       echo "<table dir='rtl' class='table table-bordered'> 
         <tr> 
          <td>name</td> 
          <td>job</td> 
          <td>phone number</td> 
          <td>home address</td> 
          <td>postal code</td> 
          <td>home phone number</td> 
          <td>date</td> 
         </tr>"; 
       while ($row = mysqli_fetch_assoc($result)) { 
        echo "<tr> 
           <td>$row[first_name] $row[last_name]</td> 
           <td>$row[job]</td> 
           <td>$row[phone_num]</td> 
           <td>$row[home_address]</td> 
           <td>$row[postcode]</td> 
           <td>$row[home_phone_num]</td> 
           <td>$row[date]</td> 
          </tr>"; 
    } 
       echo "</table>"; 
     </div> 
     </div> 
    </div> 
</div> 

私は(この表では、私はテーブルからいくつかの行を持っている)ボタンで自分のページ上の単純なテーブルを持って、私はボタンをクリックすることにより、モーダルで、この表からすべての行を表示したい...

+0

ボタンをクリックしたときに何を得ましたか?あなたの問題は何ですか?ご指定ください。 –

+0

@ankit私は何も持っていません。選択された行IDをモーダルに送る方法を知りたいのですが... –

+0

あなたは '<?php' openingと'?> 'を閉じて、ボディブロック。 –

答えて

0

idは、jsを使用する通話モーダルの場合に一意である必要があります。

はこれを試してみてください:

<html> 
<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 
<?php 
$connection = new mysqli("localhost", "root", "", "simozar"); 
$sql = "SELECT * FROM customer"; 
$result = mysqli_query($connection, $sql); 
if (mysqli_num_rows($result) > 0) { 
    echo "<table dir='' class='table table-bordered'> 
      <tr> 
       <td>name</td> 
       <td>job</td> 
       <td>phone number</td> 
      </tr>"; 
    while ($row = mysqli_fetch_assoc($result)) { 
     echo "<tr> 
       <td>$row[first_name] $row[last_name]</td> 
       <td>$row[job]</td> 
       <td>$row[phone_num]</td> 
       <td><button type='button' class='btn btn-info' data-toggle='modal' data-target='#more_info".$row['phone_num']."'>show more info</button></td> 
       </tr>"; 
       $modal.="<div id='more_info".$row['phone_num']."' class='modal fade' role='dialog'> 
       <div class='modal-dialog'> 
        <div class='modal-content'> 
         <div class='modal-body'> 
          <table class='table table-bordered'> 
           <tr> 
            <td>name</td> 
            <td>job</td> 
            <td>phone number</td> 
            <td>home address</td> 
            <td>postal code</td> 
            <td>home phone number</td> 
            <td>date</td> 
           </tr><tr> 
            <td>$row[first_name] $row[last_name]</td> 
            <td>$row[job]</td> 
            <td>$row[phone_num]</td> 
            <td>$row[home_address]</td> 
            <td>$row[postcode]</td> 
            <td>$row[home_phone_num]</td> 
            <td>$row[date]</td> 
           </tr> 
          </table>'; 
         </div> 
        </div> 
       </div> 
       </div>"; 
    } 
    echo "</table>"; 
}else{ 
    echo "no information"; 
} 

echo $modal; 
$connection->close(); 
?> 
</body> 
</html> 

それは動作するはずです。