JavaScript实现表格单元格求和及逐位求和的方法

一、实现下拉框值与A1单元格的求和显示 #

嘿，先帮你搞定基础的求和需求！首先咱们得确保A1是能输入数值的（比如用输入框），然后修改你的myFunction，让它同时获取A1的数值、下拉框选中的数值，相加后再显示到A2里。这里要注意类型转换——从DOM拿到的都是字符串，得转成数字才能做加法，不然会变成字符串拼接哦。

修改后的完整代码示例：

<html>
<head>
    <script>
        function myFunction() {
            // 获取下拉框元素
            const drop = document.getElementById("drop");
            // 把下拉框选中的文本转成数字
            const selectedValue = Number(drop.options[drop.selectedIndex].text);
            // 获取A1的数值，为空的话默认设为0，避免出现NaN
            const a1Value = Number(document.getElementById("a1").value) || 0;
            // 计算总和
            const total = selectedValue + a1Value;
            // 把结果渲染到A2
            document.getElementById("a2").innerHTML = total;
        }
    </script>
</head>
<body>
    <!-- A1数值输入框 -->
    <div>A1: <input type="number" id="a1" placeholder="请输入数值"></div>
    <!-- 下拉选择框，选完自动触发计算 -->
    <div>
        选择数值:
        <select id="drop" onchange="myFunction()">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="10">10</option>
        </select>
    </div>
    <!-- A2显示求和结果 -->
    <div>A2（总和）: <span id="a2"></span></div>
</body>
</html>

小提示：如果你的A1不是输入框，而是普通的<div>或<span>，只需要把document.getElementById("a1").value改成document.getElementById("a1").innerHTML，记得同样要转成数字哦！

二、实现数值的逐位求和功能 #

接下来搞定逐位求和的需求，比如数字123的逐位和是1+2+3=6。咱们可以写一个辅助函数来处理这个逻辑，下面以“总和的逐位求和”为例，给你扩展代码：

<html>
<head>
    <script>
        // 辅助函数：计算数字的逐位和
        function getDigitSum(num) {
            // 把数字转成字符串拆成单个字符，再转成数字累加
            return num.toString().split('').reduce((sum, digit) => sum + Number(digit), 0);
        }

        function myFunction() {
            const drop = document.getElementById("drop");
            const selectedValue = Number(drop.options[drop.selectedIndex].text);
            const a1Value = Number(document.getElementById("a1").value) || 0;
            const total = selectedValue + a1Value;
            
            // 显示总和到A2
            document.getElementById("a2").innerHTML = total;
            // 计算总和的逐位和，显示到A3
            const digitSum = getDigitSum(total);
            document.getElementById("a3").innerHTML = digitSum;
        }
    </script>
</head>
<body>
    <div>A1: <input type="number" id="a1" placeholder="请输入数值"></div>
    <div>
        选择数值:
        <select id="drop" onchange="myFunction()">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="10">10</option>
            <option value="123">123</option>
        </select>
    </div>
    <div>A2（总和）: <span id="a2"></span></div>
    <div>A3（总和的逐位求和）: <span id="a3"></span></div>
</body>
</html>

说明：如果想单独对A1或者下拉框的数值做逐位求和，直接把对应的值传入getDigitSum函数就行，比如getDigitSum(a1Value)就能得到A1数值的逐位和。

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