Question

我正在尝试使用bootstrap进行动态表，但我无法推断为什么它不起作用。有一个HTML部分：

    <div class="container">
        <button onclick="CreateTable()">Extend</button>          
        <table class="table">
            <thead>
                <tr>
                    <th>Employee Id</th>
                    <th>Name</th>
                    <th>Country</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>John Doe</td>
                    <td>Country1</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Mary Moe</td>
                    <td>Country2</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Jack Dooley</td>
                    <td>Country3</td>
                </tr>
                <p id="id_tabela"></p>
            </tbody>
        </table>
    </div>

并且有javascript：

        function CreateTable() {
            var employee = new Array();
            employee.push([4, "Billie Jean", "Country4"]);
            employee.push([5, "Harish Kumar", "Country5"]);
            employee.push([6, "Pankaj Mohan", "Country6"]);
            employee.push([7, "Nitin Srivastav", "Country7"]);
            employee.push([8, "Ramchandra Verma", "Country8"]);

            var tablecontents = "";
            for (var i = 0; i < employee.length; i++) {
                tablecontents += "<tr>";
                for (var j = 0; j < employee[i].length; j++) {
                    tablecontents += "<td>" + employee[i][j] + "</td>";
                }
                tablecontents += "</tr>";
            }
            document.getElementById("id_tabela").innerHTML = tablecontents;
        }

所以我想扩展表格，我无法弄清楚它为什么不起作用。

Answer 1

您正在段中加载数据，这不是您想要做的。该段也不应该在那里。您可以将id添加到tbody，然后只需将innerHTML扩展为https://jsfiddle.net/14pt76wp/。

为什么使用本机功能？ bootstrap包含jQuery。你可以这样做：

$('table tbody').append(tablecontents);

另一个技巧：

迭代数组并执行employee[i] = '<td>' + employee[i].join('</td><td>') + '</td>';

tablecontents = '<tr>' + employee.join('</tr><tr>') + '</tr>';

带引导程序的动态表

1 个答案: