どのように私はクリックして任意の行にポップアップダイアログボックスを配置する

Question

私はテーブルのコードを持っていると私はどこでも私はダイアログボックスのポップアップのための特定のをクリックしたい。例えば、私は

Jazz 3 4 jazzy 
Ram 5 7 Ruth 
John 6 88 Jujube 

を持っている場合、私は88をクリックした場合、私は、ダイアログボックスで、ジョンの詳細を取得したり、私はルースをクリックした場合、私はラムの詳細情報を取得すること。

コード

<script type="text/javascript"> 

    $('#tableItems').on('click', 'tr', function() { 
     var row = $(this).find('td:first').text(); 
     alert('You clicked ' + row); 
    }); 
</script> 

    <th style='width:75%;'>Janurary</th> 
         <th style='width:75%;'>February</th> 
         <th style='width:75%;'>March</th> 
         <th style='width:75%;'>April</th> 
         <th style='width:75%;'>May</th> 
         <th style='width:75%;'>June</th> 
         <th style='width:75%;'>July</th> 
    while($row=pg_fetch_array($result)) 
{ ?> 
<tr> 
<td style= "font-weight: bold; border-bottom: 3px solid"><?php echo $row['client_id'] ?></td> 

    <td style="padding:0px !important; border-bottom: 3px solid"> 

     <span style="height:50%;width:100%;display: inline-block; background-color: #fcf8e3; font-weight: bold; padding-left:5px; padding-right:5px;font-size:14"> 
      <?php echo "Charges";?> 
     </span> 
       <span style="height:50%;width:100%;border-top:1px solid black; display: inline-block; background-color: #dff0d8; font-weight: bold; padding-left: 5px; padding-right: 5px;font-size:14"> 
      <?php echo "Payments";?> 
       </span> 
</td> 
<?php for ($x=1;$x<=12;$x++){ 
      $val=strlen($x); 
     if($val<2) 
     { 
     $query1= "Select sum(charge_amount) from charge where client_id= '".$row['client_id']."' AND to_char(charge_entry_date,'YYYY-MM') = '".$year."-". '0'.$x."'"; 
     $query2= "Select sum(paid_amount) from payment where client_id = '".$row['client_id']."' AND to_char(entry_date, 'YYYY-MM') ='". $year."-". '0'.$x."'"; 

      } 
      else 
      { 
    $query1= "Select sum(charge_amount) from charge where client_id= '".$row['client_id']."' AND to_char(charge_entry_date,'YYYY-MM') = '".$year."-".$x."'"; 
    $query2= "Select sum(paid_amount) from payment where client_id = '".$row['client_id']."' AND to_char(entry_date, 'YYYY-MM') ='". $year."-".$x."'"; 
} 



    $result1= pg_query($conn,$query1); 
     $row2=pg_fetch_array($result1); 


     $result2= pg_query($conn,$query2); 


     $row3=pg_fetch_array($result2); 

     ///// 
     $val2=strlen($x-1); 
     if($val2<2) 
     { 

    else{ 


    $q= "Select sum(charge_amount) from charge where client_id= '".$row['client_id']."' AND to_char(charge_entry_date,'YYYY-MM') = '".$year."-".($x-1)."'"; 
     $q2= "Select sum(paid_amount) from payment where client_id = '".$row['client_id']."' AND to_char(entry_date, 'YYYY-MM') ='". $year."-".($x-1) ."'"; 

     } 
     $r=pg_query($conn,$q); 
     $row5=pg_fetch_array($r); 

     $r2=pg_query($conn,$q2); 
     $row6=pg_fetch_array($r2); 


     //// 

?> 

    <td style="padding:0px !important; border-bottom: 3px solid"> 
    <span style="height:50%;width:100%;display: inline-block;background-color: #fcf8e3; padding-left:5px; padding-right:5px;font-size:14; white-space: nowrap"> 
    <?php if ($row2['sum'] == NULL) 
    { 
    echo "0.00"; 
} `else{ 
` 


    echo number_format($row2['sum'], 2, '.', ','); 

    if($x==01){ 
        echo "";  } 

     else if($row2['sum']>$row5['sum']) 

    { 

...およびその他のエコー

Answer 1

はここ

がスニペットは

です..私はこれが何をしたいと思い、これを試してみてください

$(function(){ 
 
$(document).on("click","table tr td",function(){ 
 
    $(".modal").modal("show"); 
 
var curr_tr = $(this).closest("tr"); 
 
    var td_length = $(curr_tr).find("td").length; 
 
    $("#data").empty(); 
 
    for(var i =0; i< td_length; i++) 
 
    { 
 
    $("#data").append($(curr_tr).find("td:eq("+i+")").html()+" "); 
 
    } 
 
}); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<table style="width:100%"> 
 
    <tr> 
 
    <th>Firstname</th> 
 
    <th>Lastname</th> 
 
    <th>Age</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Jill</td> 
 
    <td>Smith</td> 
 
    <td>50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Eve</td> 
 
    <td>Jackson</td> 
 
    <td>94</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Mor</td> 
 
    <td>Ruth</td> 
 
    <td>10</td> 
 
    </tr> 
 
</table> 
 

 
<div class="modal fade"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
      <span aria-hidden="true">&times;</span> 
 
     </button> 
 
     <h4 class="modal-title">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p id="data"></p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div><!-- /.modal-content --> 
 
    </div><!-- /.modal-dialog --> 
 
</div><!-- /.modal -->

Answer 2

あなたjQueryはうまく動作しているようです。私はあなたのHTMLの上に行くとより密接にすべての構文が正しいことを確認します。

私はPHPをよく知らないので、あなたのコードで正確に何が起こっているのかを知ることは難しいです。

しかし、あなたがこの例から見ることができるように、あなたのjQueryコードがうまく働いている： https://jsfiddle.net/exxtvs0g/