JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="utf-8" />
  <title>V3 - Query (類 SQL)</title>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
  <h2>Version 3 — 使用 Google Visualization Query 語法（select / where / order）</h2>

  <p>
    查詢：<input id="queryInput" value="select A, C, D where D > 1 order by D desc" style="width:60%"/>
    <button id="runBtn">執行查詢</button>
  </p>

  <div id="demo">準備就緒，請輸入查詢後按「執行查詢」。</div>

  <script>
    // 請替換成你的試算表 ID 與工作表名稱
	var SHEET_ID = "1QScI5d56Kh-LGywY4WR6EvRGPcalFQYUAdqMxbFVDvk";
    var SHEET_NAME = "工作表1"; // 或你自己的工作表名稱

    google.charts.load('current', { packages: ['corechart'] });
    google.charts.setOnLoadCallback(setup);

    var baseUrl;
    function setup() {
      baseUrl = 'https://docs.google.com/spreadsheets/d/' + SHEET_ID + '/gviz/tq?sheet=' + encodeURIComponent(SHEET_NAME);
      document.getElementById('runBtn').addEventListener('click', runQuery);
    }

    function runQuery() {
      var q = document.getElementById('queryInput').value;
      document.getElementById('demo').innerText = "查詢中：" + q;
      var query = new google.visualization.Query(baseUrl);
      query.setQuery(q);
      query.send(handleResponse);
    }

    function handleResponse(response) {
      if (response.isError()) {
        document.getElementById('demo').innerText = 'Query 錯誤：' + response.getMessage() + ' — ' + response.getDetailedMessage();
        return;
      }

      var data = response.getDataTable();
      var rows = data.getNumberOfRows();
      var cols = data.getNumberOfColumns();

      var html = "<strong>查到 " + rows + " 筆</strong><br><br>";
      html += "<table border='1' cellpadding='4'><tr>";
      for (var c = 0; c < cols; c++) {
        html += "<th>" + data.getColumnLabel(c) + "</th>";
      }
      html += "</tr>";

      for (var r = 0; r < rows; r++) {
        html += "<tr>";
        for (var c = 0; c < cols;...