javascript - How do I put a dialog box to pop up on any row I click -
i have code of table , want anywhere click on dialog box pop up. example, if have
jazz 3 4 jazzy ram 5 7 ruth john 6 88 jujube that if click on 88 details john in dialog box or if click on ruth details 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 ($x=1;$x<=12;$x++){ $val=strlen($x); if($val<2) { $query1= "select sum(charge_amount) charge client_id= '".$row['client_id']."' , to_char(charge_entry_date,'yyyy-mm') = '".$year."-". '0'.$x."'"; $query2= "select sum(paid_amount) payment client_id = '".$row['client_id']."' , to_char(entry_date, 'yyyy-mm') ='". $year."-". '0'.$x."'"; } else { $query1= "select sum(charge_amount) charge client_id= '".$row['client_id']."' , to_char(charge_entry_date,'yyyy-mm') = '".$year."-".$x."'"; $query2= "select sum(paid_amount) payment client_id = '".$row['client_id']."' , 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) charge client_id= '".$row['client_id']."' , to_char(charge_entry_date,'yyyy-mm') = '".$year."-".($x-1)."'"; $q2= "select sum(paid_amount) payment client_id = '".$row['client_id']."' , 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']) { ... , other echos
try this, think want..
here 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 =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">×</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 -->
Comments
Post a Comment