Html table (XML binded) with command buttons to edit, delete, create

Question

I have an XML file, that I want to both view and create, edit and delete records. Now I have just managed to read the xml file, and made a decent bootstrap table. I know there is some good libraries out there, but I want to use bootstrap.

This is the code I'm using to retrive the data:

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

My result:

and this is an example how I want my result:

Answer 1

This is how i added the buttons:

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