title: Html table (XML binded) with command buttons to edit, delete, create
body: <p>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. </p>
  
  <p>This is the code I'm using to retrive the data:</p>
  
  <pre><code>    $(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();
                      $('&lt;tr&gt;&lt;/tr&gt;').html('&lt;th&gt;'+Col0+'&lt;/th&gt;&lt;td&gt;'+Col1+'&lt;/td&gt;&lt;td&gt;'+Col2+'&lt;/td&gt;&lt;td&gt;'+Col3+'&lt;/td&gt;&lt;td&gt;'+Col4+'&lt;/td&gt;&lt;td&gt;'+Col5+'&lt;/td&gt;&lt;td&gt;'+Col6+'&lt;/td&gt;').appendTo('#gamedefinitions');
                  });
              });
  </code></pre>
  
  <p>My result:
  <img src="https://i.stack.imgur.com/7MvMl.jpg" alt="enter image description here"></p>
  
  <p>and this is an example how I want my result:
  <img src="https://i.stack.imgur.com/SwFTL.png" alt="Picture not made by me"></p>