Access text on click

Question

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 number of ways but cannt get what i want. whats the approach?

my php code:

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>";

javascript code;

<script>
        $(document).ready(function(){
            $(".x").each(function(i){
                $(this).click(function(){
                    console.log($(this).children().eq(i).text());
                });
            });
        });
    </script>

Answer 1

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.

Answer 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/

Answer 3

Not sure why everyone is going for complicated solutions. Just use a selector that targets the elements you desire:

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

or even just:

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

Dynamic elements:

If you are after something more efficient, you can use a delegated event handler. This has the advantage that it will still work if items are added dynamically to the table:

$("table").on('click', 'td.r', function(){
    console.log($(this).text());
});

This works by listening for events (in this case click) to bubble up to the non-changing ancestor element, then it applies the jQuery filter (in this case td.r) to just the elements in the bubble-chain. It then applies the function to just the element that caused the event. The upshot of all this is that the elements only need to exist at event time and not when the event was registered.

The target of the delegated event should be a non-changing ancestor element. In this example I just chose table. If nothing is close/convenient the default to use is document (do not use body as it has a bug that can stop mouse events responding)

Answer 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

Answer 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.

Answer 6

I would do this

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