javascript - 带有用于编辑、删除、创建的命令按钮的 Html 表（XML 绑定）

Question

我有一个 XML 文件，我想查看和创建、编辑和删除记录。现在我刚刚设法读取了 xml 文件，并制作了一个不错的引导表。我知道那里有一些很好的库，但我想使用引导程序。

这是我用来检索数据的代码：

    $(document).ready(function(){
        $.ajax({
            type: "GET",
            url: "Data/gameData.xml",
            dataType: "xml",
            success: function(xml) {
                $(xml).find('games').each(function(){
                    var Col0 = $(this).find('id').text();
                    var Col1 = $(this).find('name').text();
                    var Col2 = $(this).find('difficulty').text();
                    var Col3 = $(this).find('numberOfRisks').text();
                    var Col4 = $(this).find('budget').text();
                    var Col5 = $(this).find('numberOfWorkers').text();
                    var Col6 = $(this).find('overtimeWorkers').text();
                    $('<tr></tr>').html('<th>'+Col0+'</th><td>'+Col1+'</td><td>'+Col2+'</td><td>'+Col3+'</td><td>'+Col4+'</td><td>'+Col5+'</td><td>'+Col6+'</td>').appendTo('#gamedefinitions');
                });
            });

我的结果：

这是一个我想要我的结果的例子：

Answer 1

这就是我添加按钮的方式：

$(document).ready(function loadGameData(){
        $.ajax({
            type: "GET",
            url: "Data/gameData.xml",
            dataType: "xml",
            success: function(xml) {
                $(xml).find('game').each(function(){
                    var Col0 = $(this).attr('id');
                    var Col1 = $(this).find('name').text();
                    var Col2 = $(this).find('difficulty').text();
                    var Col3 = $(this).find('numberOfRisks').text();
                    var Col4 = $(this).find('budget').text();
                    var Col5 = $(this).find('numberOfWorkers').text();
                    var Col6 = $(this).find('overtimeWorkers').text();
                    $('<tr></tr>').html('<th>'+Col0+'</th><td>'+Col1+'</td><td>'+Col2+'</td><td>'
                            +Col3+'</td><td>'+Col4+'</td><td>'+Col5+'</td><td>'+Col6
                            +'</td><td><div class="btn-group"><button class="btn btn-success" type="button" onclick="javascript:selectRow(this); return false;">Velg</button>\<' +
                            'button class="btn btn-warning" type="button" onclick="javascript:editRow(this); return false;">Endre</button>\<' +
                            'button class="btn btn-danger" type="button" onclick="javascript:deleteRow(this); return false;">Slett</button></div></td>').appendTo('#gamedefinitions');
                });
            }
        });
    });