當我點擊一個表格行時，會顯示一個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>