如何将Google Sheet温湿度关联水数据接入网页实现查询功能

1. 预处理Google Sheet #

• 确认你的Sheet结构符合要求：A列从第2行开始为温度数值，第1行从B列开始为湿度标识（如5%），交叉单元格为对应水数据。
• 将Sheet发布为可访问的CSV：
  1. 打开Sheet，点击右上角「分享」，设置权限为「知道链接的人可查看」（按需选择公开范围）。
  2. 点击「文件」→「共享」→「发布到网络」，选择「整个文档」，格式选「逗号分隔值(.csv)」，点击「发布」后复制生成的CSV链接。

2. 前端网页实现代码 #

直接使用以下HTML+JS代码，替换其中的CSV链接即可：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>温湿度水数据查询</title>
    <style>
        .wrapper { max-width: 400px; margin: 30px auto; padding: 20px; border: 1px solid #eee; border-radius: 8px; }
        .input-item { margin-bottom: 16px; }
        label { display: block; margin-bottom: 6px; font-weight: 500; }
        input { width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px; }
        button { width: 100%; padding: 10px; background: #4285F4; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
        #output { margin-top: 20px; padding: 12px; background: #f8f9fa; border-radius: 4px; }
    </style>
</head>
<body>
    <div class="wrapper">
        <h3>温湿度查水数据</h3>
        <div class="input-item">
            <label>温度：</label>
            <input type="number" id="tempInput" placeholder="例：5">
        </div>
        <div class="input-item">
            <label>湿度：</label>
            <input type="text" id="humidityInput" placeholder="例：5%">
        </div>
        <button onclick="queryData()">查询</button>
        <div id="output"></div>
    </div>

    <script>
        // 替换成你的Google Sheet CSV发布链接
        const CSV_LINK = '你的CSV链接地址';
        let tempDataList = [];
        let humidityLabels = [];

        // 页面加载时预加载CSV数据
        window.onload = async () => {
            try {
                const res = await fetch(CSV_LINK);
                const csvContent = await res.text();
                parseCSV(csvContent);
            } catch (err) {
                document.getElementById('output').textContent = '数据加载失败，请检查CSV链接或Sheet权限';
                console.error(err);
            }
        };

        // 解析CSV数据为可用格式
        function parseCSV(csvText) {
            const rows = csvText.split('\n').filter(row => row.trim());
            // 提取第一行的湿度表头
            humidityLabels = rows[0].split(',').map(item => item.trim());
            // 提取后续行的温度与对应水数据
            for (let i = 1; i < rows.length; i++) {
                const cols = rows[i].split(',');
                const temp = cols[0].trim();
                const waterValues = cols.slice(1).map(val => val.trim());
                tempDataList.push({ temp, waterValues });
            }
        }

        // 执行查询逻辑
        function queryData() {
            const inputTemp = document.getElementById('tempInput').value.trim();
            const inputHumidity = document.getElementById('humidityInput').value.trim();

            if (!inputTemp || !inputHumidity) {
                document.getElementById('output').textContent = '请填写完整的温度和湿度';
                return;
            }

            // 匹配温度行
            const targetRow = tempDataList.find(item => item.temp === inputTemp);
            if (!targetRow) {
                document.getElementById('output').textContent = `未找到温度${inputTemp}对应的记录`;
                return;
            }

            // 匹配湿度列索引
            const humidityIndex = humidityLabels.indexOf(inputHumidity);
            if (humidityIndex === -1) {
                document.getElementById('output').textContent = `未找到湿度${inputHumidity}对应的记录`;
                return;
            }

            // 提取交叉单元格的数据
            const result = targetRow.waterValues[humidityIndex - 1];
            document.getElementById('output').textContent = `查询结果：温度${inputTemp}、湿度${inputHumidity}对应的水数据为${result}`;
        }
    </script>
</body>
</html>

3. 关键注意事项 #

• 输入格式要与Sheet完全匹配：比如Sheet中湿度是5%，用户输入必须带%；若想支持纯数字输入，可在代码中添加处理逻辑（如自动给输入数字拼接%）。
• 数据同步：Sheet内容更新后，发布的CSV会自动同步，无需重新发布。
• 权限问题：确保Sheet的共享权限设置正确，否则前端无法获取数据。

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