Question

我想获得点击哪个表数据的文本。即，如果点击post_no，则获取$ post_no值，如果点击描述，则获取“描述”一词。我尝试了很多方法，但无法得到我想要的东西。方法是什么？

我的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的值？那你为什么不在那个类上绑定事件呢？

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

因为无论出于何种原因，人们继续为此付出代价 - 在这里，你去，小提琴。如果我做错了什么，请告诉我，不要只是投票。

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());
        });
    });

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

因为Javascript适用于事件冒泡，所以您不需要在每个元素上设置处理程序，但您可以将其设置在顶层（即使在＆＃39; body＆＃39;也可以工作），并且使用它（ event.target）你可以看到用户真正点击的位置。

因为我们现在知道用户单击的元素，所以我们可以将该引用传递给jQuery对象（$（event.target））并使用text（）函数。

Answer 4

＆＃13;

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

＆＃13;

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

＆＃13;

使用此代码，您可以提醒每个td的值。

此代码使用.each（），这是不可取的，点击event.target后更好地使用table。

Answer 5

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

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

甚至只是：

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

动态元素：

如果您追求更高效的东西，可以使用委托的事件处理程序。这样做的好处是，如果将项目动态添加到表中，它仍然可以工作：

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

这可以通过监听事件（在这种情况下为click）冒泡到不变的祖先元素，然后它应用jQuery过滤器（在这种情况下{{1} }}）只是泡沫链中的元素。它然后将该函数应用于导致该事件的元素。所有这些的结果是元素只需要在事件时存在，而不是在事件被注册时存在。

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

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

＆＃39;描述＆＃39;的PHP值和＆＃39;摘要＆＃39;没有正确连接。在jquery部分中，您也可以使用alert来获取相应td

的值

点击访问文字

6 个答案:

动态元素：