Question

我使用bootstrap html在laravel中构建一个表，一部分在java脚本中。该表在我的浏览器中是正确的，但引导程序样式不起作用。我在html中完全构建了另一个表，并且有自举设计。这是我的HTML

<table class="table table-striped" id="myTable">
</table>

这是我的java脚本部分

$.get('/spieler-table?teamID=' + teamID, function(data){
            $('#myTable').empty();
            $('#myTable').append('<thead><tr>');
            $('#myTable').append('<th>Name</th>');
            $('#myTable').append('<th>Tore</th>');
            $('#myTable').append('</tr></thead>');
            $('#myTable').append('<tbody></tbody>');
            $.each(data, function(index, valueAusData){
                $('#myTable tbody').append('<tr>');
                $('#myTable tbody').append('<td>' + valueAusData.Spieler_Name + '</td>');
                $('#myTable tbody').append('<td>' + valueAusData.Tore + '</td>');
                $('#myTable tbody').append('</tr>');
            });
        });

也许tbody中的插入不正确？

Answer 1

您通过JS创建的表格结构不正确（您将TH＆＃39添加到THEAD元素，TD添加到TBODY元素） - 试试这个：

$('#myTable').empty();
$('#myTable').append('<thead><tr>');
$('#myTable thead tr').append('<th>Name</th>');
$('#myTable thead tr').append('<th>Tore</th>');
$('#myTable').append('</tr></thead>');
$('#myTable').append('<tbody></tbody>');

$.each(data, function(index, valueAusData) {
      var row = '<tr><td>' + valueAusData.Spieler_Name + '</td><td>' +  valueAusData.Tore + '</td></tr>';
      $('#myTable tbody').append(row);
});

Answer 2

Bootstrap依赖于CSS作为JS。由于脚本通常在样式之后加载，因此您应该在表元素内部使用document.write()，而不是在页面DOM中呈现之后。我可能错了，但这可能是这种情况。

应用Bootstrap表条带

2 个答案: