HTML表格指定单元格着色异常：Node.js环境循环失效问题排查

我有一个5×5的HTML表格，可通过输入框获取两个坐标值（如A1=2、A2=3），需要给目标单元格（例：ID为23）及下方3个相邻单元格（33、43、53）着色。但当前ship.js里的draw函数只有第一个目标单元格变色，循环没正常执行，代码在WebStorm的Node.js环境运行。

原代码 #

HTML部分 #

<table><tr>
                <td id="11">11</td>
                <td id="12">12</td>
                <td id="13">13</td>
                <td id="14">14</td>
                <td id="15">15</td>
                <td id="16">16</td>
                <td id="17">17</td>
                <td id="18">18</td>
                <td id="19">19</td>
                <td id="20">20</td>
            </tr>
            <tr>
                <td id="21">21</td>
                <td id="22">22</td>
                <td id="23">23</td>
                <td id="24">24</td>
                <td id="25">25</td>
                <td id="26">26</td>
                <td id="27">27</td>
                <td id="28">28</td>
                <td id="29">29</td>
                <td id="30">30</td>
            </tr>
            <tr>
                <td>3</td>
                <td id="31">31</td>
                <td id="32">32</td>
                <td id="33">33</td>
                <td id="34">34</td>
                <td id="35">35</td>
                <td id="36">36</td>
                <td id="37">37</td>
                <td id="38">38</td>
                <td id="39">39</td>
                <td id="40">40</td>
            </tr>
            <tr>
                <td>4</td>
                <td id="41">41</td>
                <td id="42">42</td>
                <td id="43">43</td>
                <td id="44">44</td>
                <td id="45">45</td>
                <td id="46">46</td>
                <td id="47">47</td>
                <td id="48">48</td>
                <td id="49">49</td>
                <td id="50">50</td>
            </tr>
            <tr>
                <td id="51">51</td>
                <td id="52">52</td>
                <td id="53">53</td>
                <td id="54">54</td>
                <td id="55">55</td>
                <td id="56">56</td>
                <td id="57">57</td>
                <td id="58">58</td>
                <td id="59">59</td>
                <td id="60">60</td>
            </tr>
</table>
    <form name="sell">
        <table>
            <tr><td><b>A1 </b></td>
                <td><input name="A1" SIZE = 20
                           onblur="this.value=this.value.toUpperCase()"></td></tr>
            <tr><td><b>A2 </b></td>
                <td><input name="A2" SIZE = 20
                           onblur="this.value=this.value.toUpperCase()"></td></tr>
        </table>
        <input TYPE="button" value="Готово" onClick="draw()">
    </form>
    <script src="/ship.js"></script>

ship.js部分 #

function draw(){
    if (typeof document !== "undefined"){
        let A1 = document.sell.A1.value;
        let A2 = document.sell.A2.value;
        let A = A1 + A2;
        for (let i = 0; i < 3; i++){
            let element = document.getElementById(A)
            element.style.background = 'black'
            A = A + 10
        }

    }
}
draw()

错误原因 #

核心问题是字符串与数字的运算逻辑错误：

• 输入框获取的A1和A2是字符串类型，A = A1 + A2执行的是字符串拼接（比如输入2和3，得到"23"）
• 后续A = A + 10会把字符串"23"和数字10拼接成"2310"，这个ID不存在于表格中，所以后续循环找不到元素，自然无法着色
• 循环次数设置为<3，只能执行3次，而你需要的是初始单元格+下方3个，共4个单元格，次数不够

修复方案 #

把输入值转为数字进行运算，调整循环次数，并增加元素存在性判断避免报错：

修复后的ship.js代码：

function draw(){
    if (typeof document !== "undefined"){
        // 将输入的字符串转为整数
        let A1 = parseInt(document.sell.A1.value);
        let A2 = parseInt(document.sell.A2.value);
        // 计算初始单元格ID的数字值（行号*10+列号）
        let currentId = A1 * 10 + A2;
        // 循环4次：覆盖初始单元格+下方3个单元格
        for (let i = 0; i < 4; i++){
            let element = document.getElementById(currentId.toString());
            // 确保找到元素再修改样式，避免报错
            if (element) {
                element.style.background = 'black';
            }
            // 数字运算，得到下一行同列的单元格ID
            currentId += 10;
        }
    }
}
// 页面加载时自动执行可根据需求保留或注释
// draw()

额外优化建议 #

• 给输入框增加数字校验（比如限制输入只能是数字），避免非数字输入导致逻辑错误
• 统一HTML表格的单元格ID命名，修复缺失ID的单元格（比如第三行第一个单元格没有ID），避免后续找不到元素

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