使用 jquery 中的引导表将 id 添加到动态创建的行答案

【问题标题】：Add id to dynamically created row using bootstrap table in jquery使用 jquery 中的引导表将 id 添加到动态创建的行
【发布时间】：2025-12-10 21:15:02
【问题描述】：

我正在使用 JSON 值创建引导表。我可以动态地将类添加到行中。但是在创建动态引导表时，我无法将 ID 添加到行中。请找到我的代码，

HTML：

<table id="eventsTable" data-checkbox="true" data-sortable="true" data-row-style="rowStyle"></table>

JS：

$.ajax({
        type: "POST",
        url: "apilist",
        data: "",
        success: function (response) {
                    if (response != null) {
                        var data = [];
                        $.each(response.Slip, function (index) {
                            var obj = {};
                            obj.SlipID = response.Slip[index].SlipID;
                            obj.Client = response.Slip[index].Client;
                            data.push(obj);
                        });
                        $('#eventsTable').bootstrapTable({
                            columns: [
                                { field: "state", checkbox: true },
                                { field: "SlipID", title: 'SlipID', sortable: true, class : "hide" },
                                { field: "Client", title: 'Client', sortable: true },
                            ],
                            data: data,
                        });
                    }
          }
});

请告诉我建议，谢谢。

【问题讨论】：

标签： javascript jquery json bootstrap-table

【解决方案1】：

为此，您可以将 rowAttributes 用于行 attributes 和 rowStyle 用于行样式。

下面是代码片段，您可以查看。

我希望这将帮助/指导您或实现您的要求。

var data = [{
        "name": "Bahrain",
        "code": "BH"
    }, {
        "name": "Burundi",
        "code": "BI"
    }, {
        "name": "Benin",
        "code": "BJ"
    }, {
        "name": "Bhutan",
        "code": "BT"
    }, {
        "name": "Jamaica",
        "code": "JM"
    }, {
        "name": "Bouvet Island",
        "code": "BV"
    }, {
        "name": "Botswana",
        "code": "BW"
    }, {
        "name": "Samoa",
        "code": "WS"
    }, {
        "name": "Bonaire, Saint Eustatius and Saba ",
        "code": "BQ"
    }, {
        "name": "Brazil",
        "code": "BR"
    }];

    $('#eventsTable').bootstrapTable({
        columns: [{
            title: "Conutry Code",
            field: 'code',
            sortable: true
        }, {
            title: "Conutry name",
            field: 'name',
            sortable: true
        }],
        data: data,
        rowStyle: function(row, index) {
            return {
                classes: `row-border ${index%2==1?'row-even':'row-odd'}`
            };
        },
        rowAttributes: function(row, index) {
            return {
                id: `x-bootstrap-row-${index+1}`
            };
        }
    });

.row-border{
  border-bottom: 1px solid #ccc;
}
.row-odd{
  background-color: wheat;
}
.row-even{
  background-color: whitesmoke;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"/>

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


<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>


<table id="eventsTable" data-checkbox="true" data-sortable="true" data-row-style="rowStyle"></table>

【讨论】：