如何用JavaScript将乘法表的第1行和第1列设置为蓝色？

先贴你原来的代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiplication Table</title>
    <style type="text/css">
        table,th,td{
            border: 2px solid black;
            border-collapse: collapse; 
        }
        td{
            width: 250px; 
            font-size: 30px

        }
    </style>
</head>
<body>
   <table id="mytable"></table>

   <script type ="text/javascript">
    var table=document.getElementById('mytable');
    var output="";
    for(var i=1; i<=10; i++) {
        output+="<tr>";
        for(var j=1; j<=10; j++) {
            
            output+="<td>"+i*j+"</td>";
        }
        output+="</tr>"
    }
    table.innerHTML=output;
   </script>
</body>
</html>

要实现首行、首列数字变蓝，直接在生成<td>的时候加条件判断就行，用你提到的if/else完全可以，修改后的JavaScript代码如下：

var table=document.getElementById('mytable');
var output="";
for(var i=1; i<=10; i++) {
    output+="<tr>";
    for(var j=1; j<=10; j++) {
        // 判断是否是首行或首列
        if(i === 1 || j === 1) {
            output+="<td style='color: blue;'>"+i*j+"</td>";
        } else {
            output+="<td>"+i*j+"</td>";
        }
    }
    output+="</tr>"
}
table.innerHTML=output;

逻辑说明 #

• i === 1对应表格的第1行（外层循环控制行），这一行所有单元格的数字都要变蓝；
• j === 1对应表格的第1列（内层循环控制列），这一列所有单元格的数字都要变蓝；
• 用逻辑或||连接两个条件，满足任意一个就给<td>加上color: blue的行内样式，否则用默认样式。

如果想把样式和逻辑分离，也可以用CSS类的方式，更规范：

1. 先在<style>标签里新增一个类：

.blue-text {
    color: blue;
}

2. 然后修改JavaScript里的判断逻辑：

if(i === 1 || j === 1) {
    output+="<td class='blue-text'>"+i*j+"</td>";
} else {
    output+="<td>"+i*j+"</td>";
}

这种方式更利于后期维护，比如要改颜色只需要修改CSS类就行，不用动JS代码。

内容的提问来源于stack exchange，提问作者Nathan Vu