如何在我单击的任何行上弹出一个对话框

Question

I have a code of a table and I want that anywhere I click on a certain for a dialog Box to pop up. For example, if I have

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

That if I click on 88 I get the details for john in a dialog box or if I click on Ruth I get details for Ram.

Code

    <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'])

   { 

... and other echos

Answer 1

Your jQuery seems to be working fine. I would go over your html and more closely to make sure all of your syntax is right.

I'm not very familiar with PHP so it's hard for me to tell what exactly is going on in your code.

But as you can see from this example, your jQuery code is working just fine: https://jsfiddle.net/exxtvs0g/

Answer 2

Try this, i think this is what you want..

Here is the snippet

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