Question

当用户点击它时，我希望用jquery获取表中行的值。

我试过这个解决方案，但它无法正常工作：

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

错误在哪里？

Answer 1

即使表格在页面加载时存在，其内容也会在页面加载后加载（在DOM ready事件之后）。您想使用委派的事件。因此，试试这个：

$( "#records_table" ).on( "click", "tr", function(  ) {
    alert( $('td', this).eq(2).html() );
});

注意：在添加新内容后，在ajax调用的成功回调中添加此部分 - 您的版本也应该有效。

Answer 2

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

        });

以及你可以用HTML关闭tbody。

Squadra ID Cognome PREZZO

如何使用jquery选择表中行的值？

2 个答案: