jasmine825 jasmine825 - 4 months ago 18
Javascript Question

How do I put a dialog box to pop up on any row I click

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

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

Here is the snippet

$(function(){
$(document).on("click","table tr td",function(){
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()+" -> ");
  }
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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>
<p id="data"></p>