如何用JavaScript为动态生成表格的指定序号<td>设置背景色

核心修改思路 #

• 现有代码中已经维护了单元格自增编号变量c，只需在生成每个<td>标签时，判断当前编号是否匹配第三个文本框输入的高亮序号，匹配时给<td>加上背景色样式即可
• 可额外增加输入合法性校验，避免输入的序号超出总单元格数（行数×列数）导致无高亮效果

修改后的完整代码 #

<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>Document</title>
</head>
<body>
    <input type="text" name="" id="text1" placeholder="输入行数">
    <input type="text" name="" id="text2" placeholder="输入列数">
    <label for="color">Which cell to color</label>
    <input type="text" name="" id="color" placeholder="输入要高亮的单元格序号">
    <input type="button" value="Generate" onclick="h()">
    <br>
    <script>
    function h(){
        var a = parseInt(document.getElementById("text1").value);
        var b = parseInt(document.getElementById("text2").value);
        var col = document.getElementById("color").value;
        var g = parseInt(col);
        // 输入合法性校验
        var totalCell = a * b;
        if(isNaN(a) || isNaN(b) || isNaN(g) || g < 1 || g > totalCell) {
            alert("请输入合法的数值，高亮序号需要在1到"+totalCell+"之间");
            return;
        }
        document.write("<table border='1'>");
        var c = 1;
        for(i=0; i<a; i++) {
            document.write("<tr>");
            for(j=0; j<b; j++) {
                // 判断当前单元格是否需要高亮
                if(c === g) {
                    document.write("<td style='background-color: yellow;'>",c,"</td>");
                } else {
                    document.write("<td>",c,"</td>");
                }
                c++;
            }
            document.write("</tr>");
        }
        document.write("</table>");
    }
    </script>
</body>
</html>

补充说明 #

如果需要调整高亮颜色，直接修改<td>标签中background-color的属性值即可，支持颜色名、十六进制色值、RGB等CSS支持的颜色格式。

内容的提问来源于stack exchange，提问作者M Talha Sohail