如何在我單擊的任何行上彈出一個對話框

Question

我有一個表的代碼，我想要在任何地方單擊該代碼以彈出對話框。 例如，如果我有

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

如果單擊88，將在對話框中獲得john的詳細信息，或者單擊Ruth，將獲得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

您的jQuery似乎運行良好。 我會仔細檢查您的html，以確保所有語法正確。

我對PHP不太熟悉，因此很難告訴您代碼中到底發生了什么。

但是從該示例中可以看到，您的jQuery代碼運行正常： https ： //jsfiddle.net/exxtvs0g/

Answer 2

試試這個，我想這就是你想要的。

這是片段

 $(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 -->