动态员工 table 以及如何 css 风格

Question

我想根据数据集动态创建员工 table。我想弄清楚如何将所有部门名称或主管名称加粗。

这是我的代码示例：

var data = [{"name": "John Smith", "primary": 1, "title": "CEO", "phone":123}, {"name":"Frank Beans", "title": "COO", "phone": 333}, {"name": "test", "title": " newemployee", "phone": 555}, {"name": "Damar", "primary": 1, "title": "supervisor of quality", "phone": 999}]

function buildTable(data){
    var table = document.getElementById('mytable')

    for(var i =0; i < data.length; i++){
        var row = `
        <tr>
            <td data-id="primary">${data[i].name}</td>
            <td>${data[i].title}</td>
            <td>${data[i].phone}</td>
        </tr>`
        table.innerHTML += row
    }
}

我可以显示 table，太棒了！但是，当我尝试将具有名称的 td 单元格加粗时，它会将所有名称单元格加粗。我想加粗 John Smith 和 Damar，因为 John 是首席执行官，而 Damar 是主管。我正在考虑遍历数据，如果它有 primary === 1 那么我可以将粗体应用于单元格但无法弄清楚如何做到这一点。

Answer 1

您可以创建 class

.bold-td {
        font-weight: 700;
 }

然后在循环中检查当前条目是否已将主要设置为 1，如果是，则将 class 添加到当前 td 元素

for(var i = 0; i < data.length; i++){
    var row = `
    <tr>
        <td data-id="primary"`;

    if(data[i].primary === 1)
        row+= ` class="bold-td"`;

    row += `>${data[i].name}</td>
        <td>${data[i].title}</td>
        <td>${data[i].phone}</td>
    </tr>`;
    table.innerHTML += row;
}

动态员工 table 以及如何 css 风格

Dynamic employee table and how to css style

html

javascript

css

dynamic