How to get the PHP table values in jQuery when click

Question

This is my table

All i want to do is when i click "CLICK HERE" i will get the LOAN ID value for example when i click "CLICK HERE" on the first row i will get 201410000account-00002. I've been searching the web not still the codes does't work :( i've been trying to figure this out for a week now :( please help codes guru

Here is my php to generate the table

$myquery="select loan.loanid,loanamount,interest,totalamount,duedate,paymenttype,remarks from loan,member,account where loan.accountid=account.accountid and account.memberid=member.memberid and account.memberid='".$mid."'";
    $results=mysql_query($myquery);


    echo "<table  id='tableID'  border='1' align='center'>";
    echo "<tr  style='background-color:#F60;color:white' align='center'><td>Loan ID</td><td>Loan Amount</td><td>Interest</td><td>Total Loan</td><td>Due Date</td><td>Payment type</td><td>Status</td><td>Loan Info</td></tr>";

    while($rs=mysql_fetch_array($results))
    {


            if($rs['remarks']=='done')
            {

                        echo"<td align='center' > ".$rs['loanid']."</td>";
                        echo"<td align='center'>".number_format($rs['loanamount'], 2, '.', ',')."</td>";
                        echo"<td align='center'>".number_format($rs['interest'], 2, '.', ',')."</td>";
                        echo"<td align='center'>".number_format($rs['totalamount'], 2, '.', ',')."</td>";
                        echo"<td align='center' > ".$rs['duedate']."</td>";
                        echo"<td align='center' > ".$rs['paymenttype']."</td>";
                        echo"<td align='center' >Fully Paid</td>";
                        print"<td style='color:red' align='center' onClick='loadXMLDoc()'  > <a>CLICK HERE</a></td>";
                        $loanID=$rs['loanid'];
                        echo "<tr>";    

            }else{

                        echo"<td align='center' > ".$rs['loanid']."</td>";
                        echo"<td align='center'>".number_format($rs['loanamount'], 2, '.', ',')."</td>";
                        echo"<td align='center'>".number_format($rs['interest'], 2, '.', ',')."</td>";
                        echo"<td align='center'>".number_format($rs['totalamount'], 2, '.', ',')."</td>";
                        echo"<td align='center' > ".$rs['duedate']."</td>";
                        echo"<td align='center' > ".$rs['paymenttype']."</td>";
                        echo"<td  style='color:red'align='center'   >On Going</td>";
                        print"<td style='color:red' align='center'><a href='index.php'>CLICK HERE</a></td>";
                        $loanID=$rs['loanid'];
                        echo "<tr>";                                            
                }                                       
    }
    echo "</table>";

    ?>

i tried this jq earlier but it does't work :(

<script type="text/javascript">

$('tr').each(function() {
    $(this).click(function() {
        var selectedTd = $(this).children('td:first-child').text();
        alert(selectedTd);
    });
});
</script>

possible duplicate of [Jquery- Get the value of first td in table](http://stackoverflow.com/questions/2931234/jquery-get-the-value-of-first-td-in-table) — Rahul Desai, Dec 04 '14 at 08:16

Jai · Answer 1 · 2014-12-04T08:18:46.357

0

As i see you don't have refrenced the jquery library before your script and you need to bind event on tr element like this but in doc ready block:

$(function(){
   $('tr').click(function() {
      var selectedTd = $(this).find('td:first-child').text();
      alert(selectedTd);
   });
});

and if you are adding the trs through ajax then you need to user event delegation:

$('closestStaticParent').on('click', 'tr', function() {
    var selectedTd = $(this).find('td:first-child').text();
    alert(selectedTd);
});

Here closestStaticParent is the dom node which was available when the DOM loaded before ajax call(if any).

So you need to include library first:

<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script>
   $(function(){
     $('tr').click(function() {
       var selectedTd = $(this).find('td:first-child').text();
       alert(selectedTd);
     });
   });
</script>

edited Dec 04 '14 at 08:18

answered Dec 04 '14 at 08:13

Jai

74,255
12
74
103

Have you included jQuery library? – Jai Dec 04 '14 at 08:16
Am so sorry to ask this question but what u mean by "Have you included jQuery library?" am very new to this – Kyle Dec 04 '14 at 08:18
If you use jquery code then you need to put jQuery library before you execute your custom jQuery code. You can find the library here:http://jquery.com/download/ – Jai Dec 04 '14 at 08:20
You can check the with addding the library first. see the edit. – Jai Dec 04 '14 at 08:24
last question before you go hehe how can i save into a variable so i can call it later – Kyle Dec 04 '14 at 08:39
You can declare a global var and you can update the value of it and use it anywhere in the same page. – Jai Dec 04 '14 at 08:41

Rahul Desai · Answer 2 · 2014-12-04T08:23:33.740

0

First load the jQuery library:

(using Google CDN here)

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Then add this script to do the onclick functionality:

<script type="text/javascript">
  $(document).ready(function(){
    $('td').click(function() {
        var selectedTd = $(this).parent().find("td:first-child").text();
        alert(selectedTd);
    });
  });        
</script>

You need to add your event lintener inside $(document).ready(). You dont need the .each() loop. .click() will apply to all td elements.

edited Dec 04 '14 at 08:23

answered Dec 04 '14 at 08:18

Rahul Desai

15,242
19
83
138

OP has not loaded jquery library so this won't work. – Jai Dec 04 '14 at 08:21

score 0 · Answer 3 · answered Dec 04 '14 at 08:20

First of all your javascript action listener is incorrect. You should use something like this:

$(document).on('click','tr', function(){
    var selectedTd = $(this).children('td:first-child').text();
    alert(selectedTd);
});

Make sure the listener is between the script tags and you includes the jQuery libary.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>

    $(document).on('click','tr', function(){
        var selectedTd = $(this).children('td:first-child').text();
        alert(selectedTd);
    });

</script>

Your second problem is your HTML is incorrect to. You need to put the td elements in a tr tag. Try the PHP code below instead of your current "table creator" code.

if($rs['remarks']=='done')
{

            echo"<tr>";
            echo"<td align='center' > ".$rs['loanid']."</td>";
            echo"<td align='center'>".number_format($rs['loanamount'], 2, '.', ',')."</td>";
            echo"<td align='center'>".number_format($rs['interest'], 2, '.', ',')."</td>";
            echo"<td align='center'>".number_format($rs['totalamount'], 2, '.', ',')."</td>";
            echo"<td align='center' > ".$rs['duedate']."</td>";
            echo"<td align='center' > ".$rs['paymenttype']."</td>";
            echo"<td align='center' >Fully Paid</td>";
            print"<td style='color:red' align='center' onClick='loadXMLDoc()'  > <a>CLICK HERE</a></td>";
            $loanID=$rs['loanid'];
            echo "</tr>";    

}else{

            echo "<tr>";                                            
            echo"<td align='center' > ".$rs['loanid']."</td>";
            echo"<td align='center'>".number_format($rs['loanamount'], 2, '.', ',')."</td>";
            echo"<td align='center'>".number_format($rs['interest'], 2, '.', ',')."</td>";
            echo"<td align='center'>".number_format($rs['totalamount'], 2, '.', ',')."</td>";
            echo"<td align='center' > ".$rs['duedate']."</td>";
            echo"<td align='center' > ".$rs['paymenttype']."</td>";
            echo"<td  style='color:red'align='center'   >On Going</td>";
            print"<td style='color:red' align='center'><a href='index.php'>CLICK HERE</a></td>";
            $loanID=$rs['loanid'];
            echo "</tr>";                                            
    }

score 0 · Answer 4 · answered Dec 04 '14 at 08:21

your jquery statement is all right, if you click on 'tr',but if you click on anchor the page will be reloaded if you still want to click the anchor, your code should like this:

$('tr a').click(function(e) {
    e.prenventDefault();
    var selectedTd = $(this).parent().find('td:first-child').text();
    alert(selectedTd);
});

score 0 · Answer 5 · answered Dec 04 '14 at 08:26

Why dont you simply call your loadXMLDoc() function as

<script type="text/javascript">
function loadXMLDoc(loanid){
alert(loanid);
}
</script>

And hence your "td" will be

echo "<td style='color:red' align='center' onClick='loadXMLDoc(".$rs['loanid'].")'  > <a>CLICK HERE</a></td>";

How to get the PHP table values in jQuery when click

5 Answers5