请求编写JS脚本实现HTML表格数据重算与行隐藏功能

以下是完整的可运行代码，包含输入框、表格和处理逻辑，直接保存为HTML文件即可使用：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格数据处理</title>
    <style>
        .dataframe { border-collapse: collapse; width: 100%; margin-top: 20px; }
        .dataframe th, .dataframe td { border: 1px solid #ddd; padding: 8px; text-align: right; }
        .dataframe th { background-color: #f2f2f2; }
        .input-container { margin: 10px 0; }
        .input-container input { padding: 6px; width: 200px; }
        .input-container button { padding: 6px 12px; margin-left: 10px; }
    </style>
</head>
<body>
    <div class="input-container">
        <label for="newCid4">输入new_cid4值:</label>
        <input type="number" id="newCid4" placeholder="请输入数字">
        <button onclick="processTable()">执行处理</button>
    </div>

    <table class="dataframe">
        <thead>
            <tr style="text-align: right;">
                <th>timestamp</th>
                <th>cid1</th>
                <th>cid2</th>
                <th>cid3</th>
                <th>cid4</th>
                <th>cid5</th>
                <th>cid6</th>
                <th>cid7</th>
                <th>cid8</th>
                <th>cid9</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2023-04-08 15:39:21</td>
                <td>125</td>
                <td>4342&</td>
                <td>73645</td>
                <td>246</td>
                <td>4624</td>
                <td>1137504</td>
                <td>62467</td>
                <td>16596</td>
                <td>302207.827877119</td>
            </tr>
            <tr>
                <td>2023-04-08 15:39:21</td>
                <td>62462</td>
                <td>462436</td>
                <td>462436</td>
                <td>2462436</td>
                <td>2</td>
                <td>4924872</td>
                <td>46246</td>
                <td>16619</td>
                <td>1769805.989015266</td>
            </tr>
        </tbody>
    </table>

    <script>
        function processTable() {
            // 获取输入的new_cid4值并转为数字
            const newCid4 = parseFloat(document.getElementById('newCid4').value);
            // 校验输入有效性
            if (isNaN(newCid4)) {
                alert('请输入有效的数字');
                return;
            }

            // 获取表格所有数据行
            const tableRows = document.querySelectorAll('.dataframe tbody tr');
            
            // 遍历每一行处理
            tableRows.forEach(row => {
                const cells = row.querySelectorAll('td');
                const cid4Cell = cells[4];
                let currentCid4 = parseFloat(cid4Cell.textContent);

                // 处理cid4替换与行显示逻辑
                if (currentCid4 < newCid4) {
                    cid4Cell.textContent = newCid4;
                    currentCid4 = newCid4;
                    row.style.display = '';
                } else if (currentCid4 > newCid4) {
                    row.style.display = 'none';
                    return; // 跳过计算步骤
                } else {
                    row.style.display = '';
                }

                // 提取计算所需的其他列值
                const cid5 = parseFloat(cells[5].textContent);
                const cid7 = parseFloat(cells[7].textContent);
                const cid8 = parseFloat(cells[8].textContent);

                // 按公式计算并更新列值
                const cid6 = currentCid4 * cid5;
                const cid9 = (cid6 / cid7) * cid8;
                cells[6].textContent = cid6.toFixed(0);
                cells[9].textContent = cid9.toFixed(9);
            });
        }
    </script>
</body>
</html>

关键部分说明 #

输入区域 #

用数字类型输入框限制输入内容，搭配按钮触发处理逻辑，避免无效输入干扰计算。

核心处理函数processTable() #

• 输入校验：先判断输入是否为有效数字，若无效弹出提示，避免后续计算出错
• 遍历表格行：通过querySelectorAll获取所有数据行，类似Python中遍历列表元素的逻辑
• cid4替换与行隐藏：
  • 对比当前行cid4值与输入值，小于则替换cid4为输入值，同时保持行显示
  • 大于则直接隐藏该行，无需执行后续计算
• 重新计算列值：
  • 从对应单元格提取cid5、cid7、cid8的数值
  • 严格按照给定公式计算cid6和cid9，用toFixed()控制小数位数（可根据需求调整保留位数）
  • 将计算结果更新回表格对应单元格

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