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个不同的子行用于类别，最畅销的月份和金额。我试图使用＆＃39; \ n＆＃39;将它们分成下一行。但它不起作用。

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

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...')代替并添加。

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

1 个答案: