javascript - Bootstrap 表未正确显示

Question

我正在使用 JavaScript 循环访问一些数据并构建多个表，并使用带有类表表悬停的 Bootstrap。除了要生成的最后一张表之外，这在所有表上都非常有效。底部表格总是 sqashed 并且悬停不起作用。列的大小会调整为正确的大小，仅此而已。

我无法解决，两个表都声明了类:

无论制作多少张 table ，它总是发生在最后一张 table 上。我应该指出，我已经尝试了所有我能想到的方法，包括在循环和最后一次交互中添加一个虚拟表，但随后会生成两个压缩表。

更新:http://jsfiddle.net/si828/1ksyces5/8/

代码:

$('#tableContainer').empty();
    var div = document.getElementById('tableContainer');

    for (var i = 0; i < data.length; i++)
    {

        div.innerHTML = div.innerHTML;

        var para = document.createElement("p");
        var logo = document.createElement("a");
        logo.setAttribute('class', 'glyphicon glyphicon-user');
        para.appendChild(logo);
        var node = document.createTextNode(" " + data[i].userName +  "  (" + data[i].userID + ") " );
        para.appendChild(node);

        var aTag = document.createElement("a");
        aTag.setAttribute('data-id-proxy' , data[i].userID);
        aTag.setAttribute('class' , 'open-AddUserModal');
        aTag.setAttribute('href' ,'#addUserModal');

        var span = document.createElement("span");
        span.setAttribute('class', 'glyphicon glyphicon-plus');
        aTag.appendChild(span);

        para.appendChild(node);
        para.appendChild(aTag);
        para.setAttribute('class', 'text-primary');
        div.appendChild(para);

        var table = document.createElement('table'), tr, td, row, cell;
        table.setAttribute('class', 'table table-hover');
        table.setAttribute('id', 'table' + data[i].userID);
        table.setAttribute('border', '1');

        var header = table.createTHead();
        var row = header.insertRow(0);

        var cell = row.insertCell(0);
        cell.setAttribute('style' , 'width: 20%');
        cell.style.backgroundColor = '#eee';
        cell.style.fontWeight = 'bold';
        cell.innerHTML = "SRM";

        var cell = row.insertCell(1);
        cell.setAttribute('style' , 'width: 13%');
        cell.style.backgroundColor = '#eee';
        cell.style.fontWeight = 'bold';
        cell.innerHTML = "Target User";

        var cell = row.insertCell(2);
        cell.setAttribute('style' , 'width: 20%');
        cell.style.backgroundColor = '#eee';
        cell.style.fontWeight = 'bold';
        cell.innerHTML = "Target User Name";

        for (row = 0; row < data[i].targetUsers.length; row++) 
        {
            tr = document.createElement('tr');
            td = document.createElement('td');
            tr.appendChild(td);
            td.innerHTML = data[i].targetUsers[row].srm;
            table.appendChild(tr);

            td = document.createElement('td');
            tr.appendChild(td);
            td.innerHTML = data[i].targetUsers[row].targetUser;

            td = document.createElement('td');
            tr.appendChild(td);
            td.innerHTML = data[i].targetUsers[row].targetUserName;


        }

    document.getElementById('tableContainer').appendChild(table);
    }

Answer 1

基于您的 JSFiddle , 你的 div.innerHTML = div.innerHTML;在线10应该是外部 for 循环的最后一条语句(在 76 行)。否则你的表不会得到 <tbody> ，导致 Bootstrap 出现故障。

这是固定的:http://jsfiddle.net/wsLzk5wq/