javascripttwitter-bootstraphtml-tableeditxml-binding

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


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: enter image description here

and this is an example how I want my result: Picture not made by me


Solution

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