任务管理器前端表格不显示问题求助

问题根源 #

你的代码中重复定义了renderTasks和loadTasks函数，导致JavaScript执行时后定义的函数覆盖了前一个，逻辑出现混乱；另外如果修改代码后未重新部署Web App，前端也会使用旧代码，无法触发正确的表格刷新逻辑。

修正后的完整代码 #

code.gs（无需修改，保持原代码即可） #

function doGet() {
  return HtmlService.createHtmlOutputFromFile("index.html")
    .setTitle("Google Sheets Web App")
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

// Get the sheet data
function getSheetData() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
  const data = sheet.getDataRange().getValues();
  return data;
}

// Add a new task to the sheet
function addTaskToSheet(data) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
  const jobId = generateJobId();
  const newRow = [jobId, data.task, data.assigned, data.priority, data.date, data.folderLink];
  sheet.appendRow(newRow);
}

// Update a task in the sheet
function updateTaskInSheet(index, data) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
  const row = sheet.getRange(index + 1, 1, 1, 6); // Add 1 to the index to account for the header row
  row.setValues([data]);
}

// Delete a task from the sheet
function deleteTaskFromSheet(index) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
  sheet.deleteRow(index + 1); // Add 1 to the index to account for the header row
}

// Generate a JobID
function generateJobId() {
  return Math.random().toString(36).substr(2, 5).toUpperCase();
}

index.html（移除重复函数定义，完善编辑逻辑） #

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h1>Task Manager</h1>
      <form id="taskForm">
        <div class="form-row">
          <div class="col">
            <label for="task">Task:</label>
            <input type="text" class="form-control" id="task" name="task" required>
          </div>
          <div class="col">
            <label for="assigned">Assigned:</label>
            <select class="form-control" id="assigned" name="assigned">
              <option value="Person A">Person A</option>
              <option value="Person B">Person B</option>
            </select>
          </div>
          <div class="col">
            <label for="priority">Priority:</label>
            <select class="form-control" id="priority" name="priority">
              <option value="High">High</option>
              <option value="Medium">Medium</option>
              <option value="Low">Low</option>
            </select>
          </div>
          <div class="col">
            <label for="date">Date:</label>
            <input type="date" class="form-control" id="date" name="date" value="" required>
          </div>
          <div class="col">
            <label for="folderLink">Folder Link:</label>
            <input type="url" class="form-control" id="folderLink" name="folderLink" required>
          </div>
        </div>
        <button type="submit" class="btn btn-primary mt-3" id="submitBtn">Add Task</button>
        <button type="button" class="btn btn-secondary mt-3 ml-2" id="updateBtn" style="display:none;">Update Task</button>
      </form>
      <hr>
      <h2>Tasks</h2>
      <table class="table" id="tasksTable">
        <thead>
          <tr>
            <th>JobID</th>
            <th>Task</th>
            <th>Assigned</th>
            <th>Priority</th>
            <th>Date</th>
            <th>Folder Link</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <!-- Table content will be added dynamically -->
        </tbody>
      </table>
    </div>
    <script>
      $(document).ready(function () {
        // Load tasks from Google Sheets
        loadTasks();

        // Initialize the date input with today's date
        $("#date").val(new Date().toISOString().slice(0, 10));

        // Handle form submission for adding task
        $("#submitBtn").on("click", function (event) {
          event.preventDefault();
          addTask();
        });

        // Handle form submission for updating task
        $("#updateBtn").on("click", function (event) {
          event.preventDefault();
          updateTask();
        });
      });

      // Load tasks from Google Sheets
      function loadTasks() {
        google.script.run
          .withSuccessHandler((tasks) => {
            renderTasks(tasks);
          })
          .getSheetData();
      }

      // Render tasks in the table
      function renderTasks(tasks) {
        $("#tasksTable tbody").empty();
        if (!tasks || tasks.length === 0) {
          return;
        }
        // 跳过表头行，从第二行开始渲染
        tasks.slice(1).forEach((task, index) => {
          const row = $("<tr></tr>");
          task.forEach((cell, cellIndex) => {
            const cellValue = cell ? cell : "";
            if (cellIndex === 5) {
              row.append(`<td><a href="${cellValue}" target="_blank">Open Folder</a></td>`);
            } else {
              row.append(`<td>${cellValue}</td>`);
            }
          });

          // 添加编辑和删除按钮，index+1对应表格数据行的索引（不含表头）
          row.append(`
            <td>
              <button class="btn btn-sm btn-info" onclick="editTask(${index + 1})">Edit</button>
              <button class="btn btn-sm btn-danger" onclick="deleteTask(${index + 1})">Delete</button>
            </td>
          `);

          $("#tasksTable tbody").append(row);
        });
      }

      // Add a new task
      function addTask() {
        const formData = $("#taskForm").serializeArray().reduce((obj, item) => {
          obj[item.name] = item.value;
          return obj;
        }, {});

        google.script.run.withSuccessHandler(() => {
          // 任务添加成功后重新加载表格数据
          loadTasks();
          // 重置表单并恢复日期默认值
          $("#taskForm").trigger("reset");
          $("#date").val(new Date().toISOString().slice(0, 10));
        }).addTaskToSheet(formData);
      }

      // Edit task: 填充表单数据并切换按钮状态
      function editTask(index) {
        const rowData = $(`#tasksTable tbody tr:eq(${index - 1})`).find("td");
        $("#task").val(rowData.eq(1).text());
        $("#assigned").val(rowData.eq(2).text());
        $("#priority").val(rowData.eq(3).text());
        $("#date").val(rowData.eq(4).text());
        $("#folderLink").val(rowData.eq(5).find("a").attr("href"));
        
        // 添加隐藏字段记录当前编辑的行索引
        $("<input>").attr({
          type: "hidden",
          id: "editIndex",
          value: index
        }).appendTo("#taskForm");
        
        // 切换按钮显示状态
        $("#submitBtn").hide();
        $("#updateBtn").show();
      }

      // Update task
      function updateTask() {
        const editIndex = $("#editIndex").val();
        const formData = $("#taskForm").serializeArray().reduce((obj, item) => {
          if (item.name !== "editIndex") {
            obj[item.name] = item.value;
          }
          return obj;
        }, {});
        // 构造更新所需的完整数据行（包含JobID）
        const jobId = $(`#tasksTable tbody tr:eq(${editIndex - 1})`).find("td").eq(0).text();
        const updatedData = [jobId, formData.task, formData.assigned, formData.priority, formData.date, formData.folderLink];
        
        google.script.run.withSuccessHandler(() => {
          loadTasks();
          $("#taskForm").trigger("reset");
          $("#date").val(new Date().toISOString().slice(0, 10));
          $("#editIndex").remove();
          // 切换回添加任务按钮
          $("#submitBtn").show();
          $("#updateBtn").hide();
        }).updateTaskInSheet(editIndex, updatedData);
      }

      // Delete task with confirmation
      function deleteTask(index) {
        if (confirm("确定要删除该任务吗？")) {
          google.script.run.withSuccessHandler(loadTasks).deleteTaskFromSheet(index);
        }
      }
    </script>
  </body>
</html>

关键操作：重新部署Web App #

修改代码后必须重新部署Web App才能让前端生效：

1. 打开Google Apps Script编辑器
2. 点击右上角「部署」→「新部署」
3. 选择部署类型为「Web应用」
4. 设置执行权限为「任何人，甚至匿名」（按需调整）
5. 点击「部署」，复制新的Web App链接使用

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