Access Text On Click

I want to get the text of just which table data is clicked on. i.e. get $post_no value if clicked on post_no, get the word 'description' if clicked on description. I have tried a n

Solution 1:

I would do this

$('.x').click(function (e) {
    var $target = $(e.target);
    console.log($target.text());
});

Solution 2:

So you just want the value of $post_no if you click on the according div? Then why don't you just bind the event on that class?

$(".r").click(function() {
    console.log($(this).text()) 
});

Since people continue to downvote this - for whatever reason - here you go, fiddle. If i do something wrong, tell me and don't just downvote.

https://jsfiddle.net/LcbwL85m/

Solution 3:

So you want to know on what value you've clicked on, but the binding remains on the row? Perfectly possible:

$(document).ready(function(){
        $(".x").click(function(event){
            console.log(event.target); //Log where you clicked
            console.log($(event.target).text());
        });
    });

Why should this work?
In the event handler that we add to the clicking event when we click the elements with class x (every row), we pass a reference to the event itself.
In this reference we have access to a lot of information about the event, like in this case the target. The target is the Element where there is really clicked.

Because Javascript works with event bubbling, you do not need to set the handler on every element, but you can set it on a top level (even on 'body' would work), and with this (event.target) you can see where the user really clicked.

Because we now know the element that the user clicked, we can pass that reference to a jQuery object ($(event.target)) and utilise the text() function.

Solution 4:

echo "<table border=1>";
        echo "<tr><th>Post No</th><th>Writer ID</th><th>Writer Name</th><th>Title</th><th>Description</th><th>Summary</th><th>Approval</th></tr>";
        while ($row=  mysqli_fetch_array($r2)){
            $post_no=$row['post_no'];
            $writer_id=$row['writer_id'];
            $writer_name=$row['writer_name'];
            $title=$row['title'];
            $description=$row['description'];
            $summary=$row['summary'];


            echo "<tr height='50' class='x"."". " '>";
            echo "<td class='r'>".$post_no."</td>";
            echo "<td class='r'>".$writer_id."</td>";
            echo "<td class='r'>".$writer_name."</td>";
            echo "<td class='r'>".$title."</td>";
            echo "<td class='r'>".$description."</td>";
            echo "<td class='r'>".$summary."</td>";
            echo "<td class='r'>Approve</td>";
            echo "</tr>";
        }
        echo "</table>";

// jquery part

<script>
        $(document).ready(function(){
            $(document).on('click','.r',function(event){
               event.preventDefault();
               var td_txt = $(this).text();
              console.log(td_txt);
            //or you can use alert.
           });
        });
    </script>

the php values of 'description' and 'summary' were not concatenated properly. in the jquery part you can use alert as well to get the value of respective td

Solution 5:

$(function() {
  $("#table_test").find("td").each(function() {
    $(this).click(function() {
      alert($(this).text());  
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table_test" border="1">
  <tr>
    <td>One</td>
    <td>Two</td>
  </tr>
  <tr>
    <td>Three</td>
    <td>Four</td>
  </tr>
  </table>

With this code, you can alert the value of each td.

This code use .each(), which is not advisable, better use event.target on click on table.