如何獲得點擊表行的值？

Question

我的問題是：如何獲得點擊的行和列的值？

我的代碼是這樣的：

JS：

$.ajax({
        type: 'POST',
        url: url,
        data: json,
        success: function(data) {
            var response_array = JSON.parse(data);
            var columns = ['id', 'name', 'email', 'telephone', 'website', 'city'];
            var table_html = ' <tr>\n' +
                '<th id="id">Id</th>\n' +
                '<th id="name">Bedrijfnaam</th>\n' +
                '<th id="email">E-mail</th>\n' +
                '<th id="telephone">Telefoon</th>\n' +
                '<th id="website">Website</th>\n' +
                '<th id="city">Plaats</th>\n' +
                '</tr>';
            for (var i = 0; i < response_array.length; i++) {
                //create html table row
                table_html += '<tr>';
                for (var j = 0; j < columns.length; j++) {
                    //create html table cell, add class to cells to identify columns
                    table_html += '<td class="' + columns[j] + '" >' + response_array[i][columns[j]] + '</td>'
                }
                table_html += '</tr>'
            };
            $("#posts").append(table_html);
        },
        error: function (jqXHR, textStatus, errorThrown) { alert('ERROR: ' + errorThrown); }
    });

這是HTML：

<div class="tabel">
     <table id="posts">
     </table>
</div>

我嘗試了以下方法：

 $('#posts').click(function(){
        console.log("clicked");
        var id = $("tr").find(".id").html();
        console.log(id);
});

不幸的是，無論我在哪里單擊，這只會給我第一行的ID。

任何幫助表示贊賞！

拉蒙

Answer 1

下面的方法應該能夠找到ID

$('#post').on('click', function(e){
var id = $(e.target).closest('tr').find(".id").html();
console.log(id)
})

Answer 2

點擊行的HTML內容

 $('#posts tr').click(function(){
       $(this).html();
 });

點擊的td中的文字

 $('#posts tr td').click(function(){
        $(this).text();
 });

如果您正在使用ajax並且正在重繪元素 ，則不會通過click函數捕獲em。 您將需要添加功能：

$(document).on('click','#posts tr td','function(){
      $(this).text();
});

Answer 3

您可以嘗試為表使用AddEventListener，它肯定可以工作。 像這樣：

let posts = document.getlementById('posts');
posts.addEventListener('click',(e) => {
// anything you need here, for example:
console.log(e.target);
e.preventDefault();
});

同樣，最好不要對網格中的元素使用相同的ID（例如您擁有的id =“ id”），這應該有所不同。