当我单击表行时，将显示一个div，它应回显该单击行中的任何一个字段值

Question

现在，所有内容都使用此代码运行，但是我想从表中获取任何值（例如3）并在名为#popup的div中回显它。 基本上，我希望在php变量中具有该值，以便可以对该变量运行查询。

简单的解决方案将不胜感激。

HTML代码：

<table>
 <tbody>
  <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
  </tr>
  <tr>
   <td>4</td>
   <td>5</td>
   <td>6</td>
  </tr>
 </tbody>
</table>

<div id="popup">
  This is the div which will be displayed when a row in table is clicked. And it should 
  echo any td value from the table.
</div>

jQuery / Javascript代码：

$(document).ready(function(){
    $('table tbody tr').click(function(){

         var a=[];   //takes all td values from clicked row
         $(this).find('td').each(function(){
         a.push($(this).text());

    });

        $('#popup').show();
        //here the div is displayed but also any value from the array "a" should be displayed in the same div
    });
});

CSS代码：

table{

  border-collapse:collapse;
}
table td{
  border:1px solid black;
  padding:6px;
}
#popup{
  border:1px solid green;
  height:95px;
  width:177px;
  background-color:lightblue;
  color: white;
  display:none;
}

Answer 1

使用append函数将值附加到弹出div

 $(document).ready(function(){ $('table tbody tr').click(function(){ var a=[]; //takes all td values from clicked row $(this).find('td').each(function(){ a.push($(this).text()); }); $("#popup").html(a); $('#popup').show(); //below is the code to post to php program $.ajax({ url:"url_to_php_program", data:{'val':a[0]}, type:"POST", success:function(res){ //response from php } }); }); }); 

 table{ border-collapse:collapse; } table td{ border:1px solid black; padding:6px; } #popup{ border:1px solid green; height:95px; width:177px; background-color:lightblue; color: white; display:none; } #echospan{ color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </tbody> </table> <div id="popup"> This is the div which will be displayed when a row in table is clicked. And it should echo any td value from the table. </div> 

// PHP代码接受值

<?php
if (isset($_POST["val"]) && !empty($_POST["val"])) { //Checks if action value exists
$value = $_POST["val"];
// here you will get table value
}

?>

Answer 2

这很简单。 这是一个小提琴：

https://jsfiddle.net/hallleron/q1ppa00z/

您已经完成了99％的工作。 唯一的变化是：

$('#popup').html(a[Math.floor(Math.random() * a.length) + 0]).show();

我们正在生成一个介于0和数组长度（ a.length ）之间的随机数，以访问随机值并将其插入div中。

 $(document).ready(function(){ $('table tbody tr').click(function(){ var a=[]; //takes all td values from clicked row $(this).find('td').each(function(){ a.push($(this).text()); }); $('#popup').html(a[Math.floor(Math.random() * a.length) + 0]).show(); }); }); 

 table{ border-collapse:collapse; } table td{ border:1px solid black; padding:6px; } #popup{ border:1px solid green; height:95px; width:177px; background-color:lightblue; color: white; display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </tbody> </table> <div id="popup"> </div>