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

这可能是一个愚蠢的问题，没有答案，但我想我无论如何都会尝试一下

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

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

（i=0；i myTable.rows[1].cells[i].innerHTML=list[i]； } 我的目标是将数字（在本例中为1和20）放在一种字体中，将文本（在本例中为H和MIN）放在另一种字体中

这可以通过某种方式实现吗？或者您可以就如何以不同的方式构造代码/表给我一些建议吗

---

谢谢

您可以添加到代码中，以不同的跨距输出数字和字母，并使用相应的类

稍后我将在mobile上添加一个代码示例。然而，输出看起来是这样的

<span class='time'>1<span class='letters'>HR</span> 20<span class='letters'>MIN</span> </span>

1小时20分钟

在

span

元素中使用适当的类名放置数字或非数字，并用CSS进行样式设置

对于“疯狂”，将数字放在跨距中：

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

div{
字体系列：无衬线；
颜色：绿色；
}
纳姆先生{
字体系列：衬线；
颜色：蓝色；
}

---

您可以从以编程方式检测数字字符组开始，然后适当地生成跨距：

var sExample='1H 20MIN'；
var arrSpanGroups=[]；
var-sHtml=''；
函数getSpanGroups（字符串）{
var-arrGroups=[]；
var oWorkingGroup={
isNumeric:false，
项目：[]
}
string.split（“”）.forEach（函数（sLetter）{
handleCharacter（sLetter、oWorkingGroup、ArrGroup）；
});
推({
文本：oWorkingGroup.items.join（“”），
isNumeric:oWorkingGroup.isNumeric
});
//arrGroups.push（oWorkingGroup.items.join（“”））；//添加最后一个组
arrGroups.splice（0，1）；//去掉第一个空项；
返回组；
}
函数句柄字符（sLetter、oWorkingGroup、arrGroups）{
如果（oWorkingGroup.isNumeric===isNumeric（sLetter））{//它们都是数字或字母，请将它们分组
oWorkingGroup.items.push（sLetter）；
}否则{//他们不同，结束工作组，开始新的工作
推({
文本：oWorkingGroup.items.join（“”），
isNumeric:oWorkingGroup.isNumeric
});
oWorkingGroup.isNumeric=isNumeric（sLetter）；
oWorkingGroup.items=[sLetter]；
}
}
函数为数字（sLetter）{
return！isNaN（parseFloat（sLetter））和&isFinite（sLetter）；
}
函数spanGroupsToHtml（arrGroups）{
var shtmltoreurn=''；
arrGroups.forEach（函数（oGroup）{
if（oGroup.isNumeric）{
shtmltoreurn+=''+oGroup.text+''
}否则{
shtmltoreurn+=''+oGroup.text+''
}
});
返回shtmlto返回；
}
arrSpanGroups=getSpanGroups（六个样本）；
sHtml=spanGroupsToHtml（arrSpanGroups）；
document.getElementById（'container'）.innerHTML=sHtml
圣诞节*/
马蒂先生{
颜色：红色；
}
.性格{
颜色：绿色；
}

---

该死，我又迟到了！而且这个解决方案非常优雅