使用 JavaScript 将数据动态填充到表中

Question

我正在尝试在 JavaScript 中动态填充表格数据。我设法填充它，但样式存在一些问题，这是我到目前为止所取得的成就：

而我实现上述的代码：

function populateOverallOverview(result){
    var tableData = new Array();
    var table = document.getElementById("firstTabOverall");

    for(var i = 0; i < result.length; i++){
        tableData[i] = new Array('Category: ' + result[i].category + '\n Best selling month: ' +  result[i].topMonthStr + '\n Amount: ' + result[i].topAmount.toFixed(2));
    }

    for(var i = 0; i < tableData.length; i++){
        var newRow = table.insertRow(table.length);
        for(var j = 0; j < tableData[i].length; j++){
            var cell = newRow.insertCell(j);

            cell.innerHTML = tableData[i][j];
        }
    }
}

我的 HTML 代码：

<div class="col-md-6">
    <table id="firstTabOverall" class="table table-striped" style="font-size:13px">
    </table>
</div>

我想要实现的是，对于每一行，类别、畅销月份和数量会有 3 个不同的子行。我正在尝试使用 '\n' 将它们拆分到下一行，但它不起作用。

另外，在这种情况下，有没有办法将类别、畅销月份和金额的措辞加粗？

Answer 1

你做了一些不必要的数据转移。从results 到临时数组，从临时数组到表...为什么不直接从结果到表中呢？另外，当然\n 不起作用。换行符在 HTML 中没有任何意义。您必须单独添加每个单元格。

下面的代码看起来更直接——Array#forEach() 方法也让您不再需要单独的循环计数器：

function populateOverallOverview(result){
    var table = document.getElementById("firstTabOverall");

    // helper function        
    function addCell(tr, text) {
        var td = tr.insertCell();
        td.textContent = text;
        return td;
    }

    // insert data
    result.forEach(function (item) {
        var row = table.insertRow();
        addCell(row, 'Category: ' + item.category);
        addCell(row, 'Best selling month: ' + item.topMonthStr);
        addCell(row, 'Amount: ' + item.topAmount.toFixed(2));
    });
}

不要在值前面重复类别名称，而是将它们写入标题行。无论如何，桌子应该是这样工作的，对吧？

所以，也许这样更好：

function populateOverallOverview(result){
    var table = document.getElementById("firstTabOverall");

    // helper function        
    function addCell(tr, text) {
        var td = tr.insertCell();
        td.textContent = text;
        return td;
    }

    // create header 
    var thead = table.createTHead();
    var headerRow = th.insertRow();
    addCell(headerRow, 'Category');
    addCell(headerRow, 'Best selling month');
    addCell(headerRow, 'Amount');

    // insert data
    result.forEach(function (item) {
        var row = table.insertRow();
        addCell(row, item.category);
        addCell(row, item.topMonthStr);
        addCell(row, item.topAmount.toFixed(2));
    });
}

使用 CSS 设置表格和表格标题的样式。将标题行预先写入静态 HTML 源代码可能更容易。

---

如果您确实必须添加粗体文本内联标签，您可以使用这些document.createElement("b")，获取<b> 元素，设置其.textContent，然后使用各自的.appendChild()容器，在这种情况下是表格单元格。

您可以使用相同的方式添加纯文本 - 只需使用 document.createTextNode('...your text...') 并附加即可。