jQuery在表的每一行上應用一個函數

Question

我有一個對象數組。 我必須對每行應用一個函數，並記錄相應的名稱和ID。

這是我的代碼：

var json = [
    {
        id: 1,
        name: "Jon",
        age:  20

    },
    {
        id: 2,
        name: "Jessy",
        age:  25

    },
    {
        id: 3,
        name: "Sarah",
        age:  30

    },
]

console.log(json)
var tr;
for (var i = 0; i < json.length; i++) {
    tr = $('<tr/>');
    tr.append("<td>" + json[i].id + "</td>");
    tr.append("<td>" + json[i].name + "</td>");
    tr.append("<td>" + "<button class='btn btn-info'>Log</button>" + "</td>");
    $('table').append(tr);

}

使用jQuery，如何應用該函數並記錄ID和名稱？ 在單擊按鈕時，我需要記錄ID和名稱。 每個按鈕將記錄其單元格的名稱和ID

因此，如果單擊第一行中的按鈕，則應記錄id: 1 , name: jon

Answer 1

您可以簡單地執行以下操作：

 var json = [{id:1,name:"Jon",age:20}, {id:2,name:"Jessy",age:25}, {id:3,name:"Sarah",age:30}]; //console.log(json) var tr; for (var i = 0; i < json.length; i++) { tr = $('<tr/>'); tr.append("<td>" + json[i].id + "</td>"); tr.append("<td>" + json[i].name + "</td>"); tr.append("<td>" + "<button class='btn btn-info'>Log</button>" + "</td>"); $('table').append(tr); } // Attach a delegated event handler $('table').on('click', '.btn-info', function(event) { console.log('ID: ' + $(this).closest('tr').find('td:eq(0)').text()); console.log('Name: ' + $(this).closest('tr').find('td:eq(1)').text()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table></table> 

Answer 2

您可以使用forEach方法循環數組，然后使用td和button創建每一行，並將click事件添加到button。

 const json = [{"id":1,"name":"Jon","age":20},{"id":2,"name":"Jessy","age":25},{"id":3,"name":"Sarah","age":30}] const tbody = $("table tbody"); json.forEach(function(obj) { let { id, name} = obj; let btn = $('<button>', {"class": 'btn btn-info'}) .text('Log') .click(function() { console.log('ID: ' + id, 'Name: ' + name) }) let tr = $("<tr>") .append($('<td>').text(id)) .append($('<td>').text(name)) .append($('<td>').html(btn)) tbody.append(tr) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody></tbody> </table>