带有命令按钮的Html表（XML binded），用于编辑，删除，创建

Question

我有一个XML文件，我想查看和创建，编辑和删除记录。现在我已经设法读取了xml文件，并制作了一个像样的引导表。我知道那里有一些好的库，但我想使用bootstrap。

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

    $(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');
                });
            }
        });
    });