Question

我使用ajax请求中的数据填充表格，如此

$.ajax({
    type: 'GET',
    url: '/notes-rest/search',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function(data) {
        $('#notes-table tbody').append(
                $.map(data, function(note, index) {
                    return '<tr>' +
                            '<td style="display:none;">' + note.noteId + '</td>' +
                            '<td>' + $.format.date(new Date(note.date), "dd/MM/yyyy") + '</td>' +
                            '<td>' + note.owner + '</td>' +
                            '<td>' + note.name + '</td>' +
                            '<td>' + note.text + '</td>' +
                            '<td><ul id="tags-list" class="hr">' + processTags(note.tags) + '</ul></td>' +
                            '<td><a href="#" id="delete-record">delete</a> | <a href="#" id="update-record">update</a></td>'
                            + '</tr>';
                }).join()
        );
    }
});

如何在最后一列中为click（href和delete-record）添加update-record个事件？在那种情况下，我希望得到href所在的数据的整行。表看起来像这样

<table class="table table-striped table-hover" style="table-layout: fixed" id="notes-table">
    <thead>
    <tr>
        <th>Date</th>
        <th>Owner</th>
        <th>Name</th>
        <th>Text</th>
        <th>Tags</th>
        <th>Actions</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

Answer 1

您可以在代码中添加onclick

假设您构建了唯一ID

'<td><a href="#" id="delete-record-1" onclick="your_on_click_delete(id);">delete</a> | 
        <a href="#" id="update-record-1" onclick="your_on_click_update(id);">update</a></td>'

Answer 2

最后我决定这样做

$.ajax({
    type: 'GET',
    url: '/notes-rest/search',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function(data) {
        $('#notes-table tbody').append(
                $.map(data, function(note, index) {
                    var rowIndex = index + 1;
                    return '<tr id="row-' + rowIndex + '">' +
                            '<td style="display:none;">' + note.noteId + '</td>' +
                            '<td>' + $.format.date(new Date(note.date), "dd/MM/yyyy") + '</td>' +
                            '<td>' + note.owner + '</td>' +
                            '<td>' + note.name + '</td>' +
                            '<td>' + note.text + '</td>' +
                            '<td><ul id="tags-list" class="hr">' + processTags(note.tags) + '</ul></td>' +
                            '<td><a href="#" onclick="deleteRecord(' + rowIndex + ');">delete</a></td>'
                            + '</tr>';
                }).join()
        );
    }
})

有功能

function deleteRecord(id) {
    var recordId = $('#notes-table').find("tr")[id].cells[0].innerHTML;
    $.ajax({
        url: '/notes-rest/note/' + recordId,
        type: 'DELETE',
        success: function() {
            location.reload();
        }
    });
}

为位于表格行中的href添加click事件

2 个答案: