javascript - 在一个 table.cell.innerHTML 元素上设置不同的 CSS 属性

Question

这可能是一个没有答案的愚蠢问题，但我想我还是会试一试。

我正在遍历一个包含类似于“1H 20MIN”的字符串的列表，并通过 innerHTML 属性将它们添加到表格单元格中，如下所示:

for (i = 0; i < list.length; i++) { 
    myTable.rows[1].cells[i].innerHTML = list[i];   
}

我的目标是用一种字体显示数字(在本例中为 1 和 20)，在另一种字体中显示文本(在本例中为 H 和 MIN)。

这能以某种方式完成吗？或者您能给我一些关于如何以不同方式构建我的代码/表格的建议吗？

谢谢!

Answer 1

将数字或非数字放入具有适当类名的 span 元素中，并以这种方式使用 CSS 设置它们的样式。

例如，将数字放在跨度中:

myTable.rows[1].cells[i].innerHTML = list[i].replace(/\d+/g, "<span class=num>$&</span>");

...然后样式 .num。

例子:

var str = "1H 20MIN";
document.getElementById("ex").innerHTML = str.replace(/\d+/g, "<span class=num>$&</span>");

div {
  font-family: sans-serif;
  color: green;
}
.num {
  font-family: serif;
  color: blue;
}

<div id="ex"></div>