点击访问 <td> 文本

Question

我想获取点击 table 数据的文本。即，如果单击 post_no，则获得 $post_no 值，如果单击描述，则获得单词 'description'。我尝试了多种方法，但无法得到我想要的。方法是什么？

我的php代码：

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代码；

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

Answer 1

所以如果你点击相应的 div 你只想要 $post_no 的值？那你为什么不把事件绑定到class？

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

由于人们继续对此投反对票 - 无论出于何种原因 - 在这里，fiddle。如果我做错了什么，请告诉我，不要只是投反对票。

https://jsfiddle.net/LcbwL85m/

Answer 2

我会这样做

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

Answer 3

所以你想知道你点击了什么值，但绑定仍然在行上？完全可能：

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

为什么要这样做？
当我们单击具有 class x（每行）的元素时，在我们添加到单击事件的事件处理程序中，我们传递对事件本身的引用。
在此参考中，我们可以访问有关事件的大量信息，例如本例中的目标。目标是真正被点击的元素。

因为 Javascript 使用事件冒泡，你不需要在每个元素上设置处理程序，但你可以在顶层设置它（即使在 'body' 上也可以），并且有了这个 (event.target) 你可以看到用户真正点击的地方。

因为我们现在知道用户点击的元素，我们可以将该引用传递给 jQuery 对象 ($(event.target)) 并利用 text() 函数。

Answer 4

$(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>

通过这段代码，您可以提醒每个td的值。

此代码使用 .each()，这是不可取的，最好在单击 table 时使用 event.target。

Answer 5

不确定为什么每个人都在寻求复杂的解决方案。只需使用针对您想要的元素的选择器：

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

甚至只是：

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

动态元素：

如果您追求更高效的方法，可以使用委托事件处理程序。这样做的好处是，如果将项目动态添加到 table:

，它仍然可以工作

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

这通过侦听事件（在本例中为 click）来冒泡到不变的祖先元素，然后它应用 jQuery 过滤（在本例中为 td.r）以仅过滤气泡链中的元素。它 then 仅将函数应用于引发事件的元素。所有这一切的结果是元素只需要在事件时存在，而不是在事件注册时存在。

委托事件的目标应该是不变的祖先元素。在这个例子中我只选择了table。如果没有 close/convenient，则默认使用 document（不要使用 body，因为它有一个可以阻止鼠标事件响应的错误）

Answer 6

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 部分

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

'description' 和 'summary' 的 php 值未正确连接。在 jquery 部分，您也可以使用 alert 来获取相应 td

的值

点击访问 <td> 文本

Access <td> text on click

html

php

jquery

html-table

onclick

动态元素：