Javascript Html表格（XML绑定），带有用于编辑、删除和创建的命令按钮

我有一个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');
                });
            });

$（文档）.ready（函数（）{
$.ajax({
键入：“获取”，
url:“Data/gameData.xml”，
数据类型：“xml”，
成功：函数（xml）{
$（xml）.find（'games'）.each（function（）{
var Col0=$（this.find（'id'）.text（）；
var Col1=$（this.find（'name'）.text（）；
var Col2=$（this.find（'defestion'）.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（）；
$（“”）.html（“”+Col0+“”+Col1+“”+Col2+“”+Col3+“”+Col4+“”+Col5+“”+Col6+“”）。附录（“”#游戏定义“）；
});
});

我的结果是：

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

---

我就是这样添加按钮的：

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

$（document）.ready（函数loadGameData（）{
$.ajax({
键入：“获取”，
url:“Data/gameData.xml”，
数据类型：“xml”，
成功：函数（xml）{
$（xml）.find（'game'）.each（函数（）{
var Col0=$（this.attr（'id'）；
var Col1=$（this.find（'name'）.text（）；
var Col2=$（this.find（'defestion'）.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（）；
$（“”）.html（“”+Col0+“”+Col1+“”+Col2+“”
+Col3+“”+Col4+“”+Col5+“”+Col6
+“Velg\Endre\Slett”）。附录（“#游戏定义”）；
});
}
});
});