javascript - 动态创建的表中的粗体文本 - javascript

Question

我正在尝试使用 javascript 中的 .bold() 方法将粗体文本添加到表标题行。该表是使用以下代码动态创建的:

var table = document.getElementById('changestable');
    var titlerow = ["Type", "Change Date", "FCM", "Hull ID", "Name", "Length", "Manufacturer", "Manufacturer ID", "Year", "Value", "Owner", "Loss Payee", "Policy ID", "Start Date", "End Date"];
    var newRow = table.insertRow(0);
    for (k = 0; k < titlerow.length; k++){
        var newCell = newRow.insertCell(k);
        var newText = document.createTextNode(titlerow[k]);
        newCell.appendChild(newText);
    }

我试过:

.bold() // and this just adds <b></b>, not actually making the text bold

我也试过:

titlerow[k].style.fontWeight = 'bold'

提前致谢!

Answer 1

您不能将 style 应用于字符串 - 您必须将其应用于元素。

newCell.style.fontWeight = 'bold';

但是与其尝试在 Javascript 中搞砸它，不如在 CSS 中应用样式呢？将 Javascript 功能与页面样式分开

var table = document.getElementById('changestable');
var titlerow = ["Type", "Change Date", "FCM", "Hull ID", "Name", "Length", "Manufacturer", "Manufacturer ID", "Year", "Value", "Owner", "Loss Payee", "Policy ID", "Start Date", "End Date"];
var newRow = table.insertRow(0);
for (k = 0; k < titlerow.length; k++){
  var newCell = newRow.insertCell(k);
  var newText = document.createTextNode(titlerow[k]);
  newCell.appendChild(newText);
}

#changestable tr:first-child {
  font-weight: bold;
}

<table id="changestable"></table>

或者，甚至更好，如果可能的话，插入 th 而不是 td，并且您根本不需要任何样式，因为 th 自动加粗:

var table = document.getElementById('changestable');
var titlerow = ["Type", "Change Date", "FCM", "Hull ID", "Name", "Length", "Manufacturer", "Manufacturer ID", "Year", "Value", "Owner", "Loss Payee", "Policy ID", "Start Date", "End Date"];
var newRow = table.insertRow(0);
titlerow.forEach(titleStr => {
  newRow.appendChild(document.createElement('th'))
    .textContent = titleStr;
});

<table id="changestable"></table>