在表格行點擊，提示框顯示點擊值

Question

我遇到問題，當我點擊表格時，沒有顯示任何內容。

當我點擊讓我們說客戶名='約翰'的行，名字'約翰'應該出現在警告框上，但沒有任何反應。

這是我的表單擊代碼。

$(document).ready(function(){ 
$("#parentElementIdHere").on("click", "#test tr", function(e) { 
var name = $(this).find("td").first().text(); 
alert(name); 
}); 

而且，這裏是我生成的表代碼。

if(!empty($_GET['q'])){ 
$q = $_GET['q']; 
$query="select * from customer where customername like '$q%'"; 
$result = mysqli_query($dbconn,$query); 
echo "<div id='parentElementIdHere'>"; 
echo "<table id='test' border=3> 
<tr> 
<th>Customername</th> 
<th>nric</th> 
<th>email</th> 
<th>mobileno</th> 
<th>telephoneno</th> 
<th>address</th> 
<th>postalcode</th> 
<th>datejoined</th> 
<th>points</th> 
</tr>"; 
while($row = mysqli_fetch_array($result)){ 
echo "<tr>"; 
echo "<td>" . $row['customername'] . "</td>"; 
echo "<td>" . $row['nric'] . "</td>"; 
echo "<td>" . $row['email'] . "</td>"; 
echo "<td>" . $row['mobileno'] . "</td>"; 
echo "<td>" . $row['telephoneno'] . "</td>"; 
echo "<td>" . $row['occupation'] . "</td>"; 
echo "<td>" . $row['address'] . "</td>"; 
echo "<td>" . $row['postalcode'] . "</td>"; 
echo "<td>" . $row['datejoined'] . "</td>"; 
echo "<td>" . $row['points'] . "</td>"; 
echo "</tr>"; 
} 
echo "</table>"; 
echo "</div>"; 
} 

難道問題是因爲我的表生成是由於ajax不斷變化？

Answer 1

我設法解決這個問題。我測試了一個非ajax生成的sql表，並做了它。然後我把JavaScript代碼放到這個文件中並試用了。這是我使用的代碼。

$(document).ready(function(){ 
}).on('click','.test tr',function(){ 
var id = $(this).attr('value'); 
alert(id); 
}); 

感謝所有幫助過我的人，我感激不盡！

Answer 2

要獲得名值單擊行

  $("tr").click(function() { 
      var str = this.innerText; 
      var i = str.split('').indexOf(" "); 
      alert(str.slice(0, i)); 
     }) 

http://codepen.io/nagasai/pen/QENwgQ

獲得的點擊表格單元格值

$("td").click(function(){ 
    alert(this.innerText); 
    }) 

爲參比http://codepen.io/nagasai/pen/jrqEBz

codepen URL的任何值

希望這對你有所幫助

Answer 3

主要有兩個問題與您的代碼：

1. 你選擇'#test tr #name'說，選擇與id="name"是TR元素後代的所有元素，但它實際上是你的TR元素，所有的有ID。 （和說它們具有相同的ID 所有的，重複的ID是無效的HTML。）

2. 調用.click()綁定一個單擊處理程序，在那一刻存在元素。這意味着，當您的表由於Ajax調用而發生更改時，即使您修復了選擇器，您的點擊處理程序也不適用於新加載/創建的元素。

這兩個問題的解決方案是使用一個委派事件處理程序，它綁定到表元素的父（或最近的祖先元素，它無法獲得通過Ajax調用覆蓋）：

$(document).ready(function(){ 
    $("#parentElementIdHere").on("click", "#test tr", function(e) { 
    var name = $(this).find("td").first().text(); 
    alert(name); 
    }); 
}); 

當點擊父元素的任何後代元素時，jQuery將檢查具體點擊的元素的選擇是第二個參數the .on() method相匹配，如果是的話，它會調用你的函數this設置到匹配元素。由於匹配元素是tr元素，因此您可以使用.find("td").first()來獲取該行的名稱td。

演示：https://jsfiddle.net/269Lt9hm/