我是 .net 核心 MVC 的初学者。

这里数据总是在变化，即列和行是动态变化的

我需要使用复选框来实现 CRUD 操作，例如添加新的、编辑的、取消的和单/多删除。测试代码如下，

HTML

                            <div class="" id="ItemTableDiv" style="float: none;">
                                @*<div class="container">*@
                                <table class="table tblView" width="100%" id="tblViewTableDetails">
                                    <thead id="itemTblHeaderColumns">
                                        @*table Headers*@
                                    </thead>
                                    <tbody id="ItemConfigGrid">
                                        @*table Data*@
                                    </tbody>
                                </table>
                                @*</div>*@
                            </div>

Java 脚本

<script type="text/javascript">
$(document).ready(function () {
var data = '[{"CountryID":1,"CountryCode":"AF","CountryName":"Afghanistan","ISO_CODES":"AF / AFG","STR2":"AF","STR3":"AFG"},{"CountryID":3,"CountryCode":"DZ","CountryName":"Algeria","ISO_CODES":"DZ / DZA","STR2":"DZ","STR3":"DZA"},{"CountryID":4,"CountryCode":"AS","CountryName":"American Samoa","ISO_CODES":"AS / ASM","STR2":"AS","STR3":"ASM"},{"CountryID":5,"CountryCode":"AD","CountryName":"Andorra","ISO_CODES":"AD / AND","STR2":"AD","STR3":"AND"},{"CountryID":6,"CountryCode":"AO","CountryName":"Angola","ISO_CODES":"AO / AGO","STR2":"AO","STR3":"AGO"}]'

                    $('#itemTblHeaderColumns').html('');
                    $('#ItemConfigGrid').html('');

                    $("#divLoader").hide();
                    $("#ddldatabase").prop("disabled",false);
                    $("#ddltable").prop("disabled",false);
                    console.log(data);
                    data = JSON.parse(data);
                    console.log(data);
                    columnNames = Object.keys(data[0]);
                    //console.log(columnNames);

                    var tableHeader = $('#itemTblHeaderColumns');
                    $("#itemTblHeaderColumns tr").remove();
                    var trHeader = $('<tr />').appendTo(tableHeader);
                    //Binding Table Headers
                    for (var iCol = 0; iCol < columnNames.length; iCol++)
                    {
                        trHeader.append('<th class="trheaderTable">' + columnNames[iCol] + '</th>');
                    }
                    trHeader.append('<th class="trheaderTable">action</th>');

                    var tbody = $('#ItemConfigGrid');
                    $("itemTblHeaderColumns tr").remove();
                    //Binding Table Rows
                    for (var iRow = 0; iRow < data.length; iRow++)
                    {
                        var tr = $('<tr />').appendTo(tbody);
                        for (var iCol = 0; iCol < columnNames.length; iCol++) {
                            tr.append('<td title = ' + data[iRow][columnNames[iCol]]+'>' + data[iRow][columnNames[iCol]] + '</td>');
                        }
// added for single row delete
tr.append('<td><a href=# onclick="Delete(this,' + data[iRow][columnNames[0]] +')" ><i class="ti-pencil"></i></a></td> ');
                    }

                    $("#divGridSales").css({ display: "block" });
});
</script>