如何將對話框彈出到任意行上單擊

Question

我有一個表的代碼，我希望在任何地方點擊某個對話框以彈出對話框。舉例來說，如果我有

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

，如果我點擊我88獲得約翰細節的對話框，或者如果我點擊露絲我得到RAM的詳細信息。

代碼

<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/