I want to get the value of a row in a table with jquery, when the user click on it.
当用户点击它时,我想用jquery获取表中一行的值。
I have tried this solution, but it doesn't work correctly:
我试过这个解决方案,但它无法正常工作:
$(document).ready(function() {
$.post("./php/myjson.php", function(data, status) {
obj = JSON.parse(data);
var trHTML = '';
for (var i = 0; i < obj.giocatori.length; i++) {
trHTML += '<tr><td><img src="../media/image/squadre/' + obj.giocatori[i].Squadra.toLowerCase() + '.png"/></td><td>'+obj.giocatori[i].Giocatore+'</td><td>' + obj.giocatori[i].Cognome + '</td><td>' + obj.giocatori[i].Prezzo + '</td></tr>';
}
trHTML+='</tbody>';
$('#records_table').append(trHTML);
});
$( "#records_table tr" ).on( "click", function( ) {
alert( $(this).find('td:nth-child(2)').html());
});
});
table tbody tr:hover {
background-color: orange;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="records_table" border="1">
<tbody>
<tr>
<th>Squadra</th>
<th>ID</th>
<th>Cognome</th>
<th>Prezzo</th>
</tr>
</table>
Where is the error ?
错误在哪里?
2 个解决方案
#1
1
Even though the table exists when the page loads, its contents are loaded after the page loads (after DOM ready
event). You want to use a delegated event. Therefore, try this:
即使页面加载时表存在,其内容也会在页面加载后加载(在DOM ready事件之后)。您想使用委派的事件。因此,试试这个:
$( "#records_table" ).on( "click", "tr", function( ) {
alert( $('td', this).eq(2).html() );
});
NOTE: Adding this section -- your version -- in the success call back of the the ajax call after the new content is added should also work.
注意:在添加新内容后,在ajax调用的成功回调中添加此部分 - 您的版本也应该有效。
#2
1
You are keeping tbody in HTML, but adding the content to table. Please change the following.
您将tbody保留在HTML中,但将内容添加到表中。请更改以下内容。
$(document).ready(function() {
$.post("./php/myjson.php", function(data, status) {
obj = JSON.parse(data);
var trHTML = '';
for (var i = 0; i < obj.giocatori.length; i++) {
trHTML += '<tr><td><img src="../media/image/squadre/' + obj.giocatori[i].Squadra.toLowerCase() + '.png"/></td><td>'+obj.giocatori[i].Giocatore+'</td><td>' + obj.giocatori[i].Cognome + '</td><td>' + obj.giocatori[i].Prezzo + '</td></tr>';
}
$('#records_table tbody').append(trHTML);
});
$( "#records_table tr" ).on( "click", function( ) {
alert( $(this).find('td:nth-child(2)').html());
});
});
as well as you can close the tbody in HTML.
以及你可以用HTML关闭tbody。
Squadra ID Cognome Prezzo#1
1
Even though the table exists when the page loads, its contents are loaded after the page loads (after DOM ready
event). You want to use a delegated event. Therefore, try this:
即使页面加载时表存在,其内容也会在页面加载后加载(在DOM ready事件之后)。您想使用委派的事件。因此,试试这个:
$( "#records_table" ).on( "click", "tr", function( ) {
alert( $('td', this).eq(2).html() );
});
NOTE: Adding this section -- your version -- in the success call back of the the ajax call after the new content is added should also work.
注意:在添加新内容后,在ajax调用的成功回调中添加此部分 - 您的版本也应该有效。
#2
1
You are keeping tbody in HTML, but adding the content to table. Please change the following.
您将tbody保留在HTML中,但将内容添加到表中。请更改以下内容。
$(document).ready(function() {
$.post("./php/myjson.php", function(data, status) {
obj = JSON.parse(data);
var trHTML = '';
for (var i = 0; i < obj.giocatori.length; i++) {
trHTML += '<tr><td><img src="../media/image/squadre/' + obj.giocatori[i].Squadra.toLowerCase() + '.png"/></td><td>'+obj.giocatori[i].Giocatore+'</td><td>' + obj.giocatori[i].Cognome + '</td><td>' + obj.giocatori[i].Prezzo + '</td></tr>';
}
$('#records_table tbody').append(trHTML);
});
$( "#records_table tr" ).on( "click", function( ) {
alert( $(this).find('td:nth-child(2)').html());
});
});
as well as you can close the tbody in HTML.
以及你可以用HTML关闭tbody。
Squadra ID Cognome Prezzo