Question

我有一个非常大的html表生成如下：

function getSpeciesRowHtml(row_data) {
    var html = "";
    html = html + '<tr>' +
    '<td>' + row_data.id + '<input type="hidden" class="species_table_IDs" value="' + row_data.id + '"></td>' +
    '<td>' + row_data.name + '</td>' +
    '<td>' + row_data.name_lat + '</td>' +
    '<td>' + row_data.class + '</td>' +
    '<td>' + row_data.family + '</td>' +
    '<td>' + row_data.family_lat + '</td>' +
    '<td>' + row_data.order + '</td>' +
    '<td>' + row_data.order_lat + '</td>' +
    '<td>' + row_data.spec_status + '</td>' +
    '<td><a class="btn_species_delete">Edit</a></td>' + //delete button
    '</tr>'
    ;
    return html;
}


function fillTable(data) {
    var html = "";
    $.each(data, function (i, item) {
        html = html + getSpeciesRowHtml(data[i],true);
    });
    $('#species_table tbody')
            .prepend($(html));
};

此表的数据来自数据库到控制器。事实是可以删除数据。为此，在表格的每一行中都有“删除”按钮。删除按钮由类选择器初始化，因为它们非常多（一行一行创建需要花费大量时间）：

$('.btn_species_delete')
        .button({ icons: { primary: "ui-icon-trash" }, text: false })
        .click(function () { DeleteSpecies(id); });

也就是说，当你按下“删除”功能时必须调用哪个应该被称为“id”属性。问题是每个按钮都有自己独特的“id”，我不知道如何将它转移到那里。因为按钮的初始化是通过整个类执行的。如何最好地处理这个问题，以便尽快开展工作？

Answer 1

这样做不容易：

$('#species_table .btn_species_delete')
    .button({ icons: { primary: "ui-icon-trash" }, text: false })
    .click(function () { 
        DeleteSpecies($(this).attr('id')); 
    });

$(this)指的是点击的按钮，.attr('id')获取ID值

希望这会有所帮助。

查看以下链接以获取更多信息：

http://learn.jquery.com/javascript-101/this-keyword/ - 解释$(this)

http://api.jquery.com/attr/ - 解释.attr()

修改

所有这些都假定按钮的id与行id相同：D见Michaels回答并结合2

Answer 2

向您<a>添加数据属性，例如

'<a class="btn_species_delete" data-rowid="'+row_data.id+'">'

然后在你的onclick上：

DeleteSpecies($(this).attr('data-rowid'));

为每条记录创建一个带有编辑按钮的大表

2 个答案: