我使用的是我在网上获得并修改过的代码.它用谷歌表格制作网页表格.我遇到的问题是链接.我在一些单元格中有链接,当部署时,它只带来链接的文本,但它不是一个功能链接.有人能给我指路吗?

谷歌应用脚本:

    function doGet(e) {
  var htmlOutput = HtmlService.createTemplateFromFile('DisplaySheet');
  return htmlOutput.evaluate();
}

function getSheetData() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var dataSheet = ss.getSheetByName('Single Job View');
  var dataRange = dataSheet.getDataRange();
  var dataValues = dataRange.getValues();
  return dataValues;
}

和该HTML脚本:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      table {
        border-collapse: collapse;
      }

      td {
        padding: 5px;
        border: 1px solid black;
        white-space: pre-wrap;
      }

      td.empty {
        border: none;
      }
    </style>
  </head>
  <body>
    <h1>Display Google Sheet Web App</h1>
    <table>
      <? var tableData = getSheetData(); ?>
      <? for (var i = 0; i < tableData.length; i++) { ?>
        <tr>
          <? for (var j = 0; j < tableData[i].length; j++) { ?>
            <? var cellValue = tableData[i][j]; ?>
            <? var cellClass = cellValue ? '' : 'empty'; ?>
            <td class="<?= cellClass ?>"><pre><?= cellValue ?></pre></td>
          <? } ?>
        </tr>
      <? } ?>
    </table>
  </body>
</html>

推荐答案

当我看到您的脚本和问题时,我认为在您的情况下,需要从单元格中检索值和超链接.那么,如何修改您的脚本,如下所示?

Google Apps脚本端:

function doGet(e) {
  var htmlOutput = HtmlService.createTemplateFromFile('DisplaySheet');
  return htmlOutput.evaluate();
}

function getSheetData() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var dataSheet = ss.getSheetByName('Single Job View');
  var dataRange = dataSheet.getDataRange();
  var dataValues = dataRange.getValues();
  var links = dataRange.getRichTextValues().map(r => r.map(c => c.getLinkUrl() || null));
  var html = dataValues.map((r, i) =>
    "<tr>" + r.map((c, j) => {
      const link = links[i][j];
      const h = link ? `<a href="${link}"><pre>${c}</pre></a>` : `<pre>${c}</pre>`;
      return `<td class="${c}">${h}</td>`;
    }).join("") + "</tr>"
  ).join("");
  return html;
}

HTML端:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      table {
        border-collapse: collapse;
      }

      td {
        padding: 5px;
        border: 1px solid black;
        white-space: pre-wrap;
      }

      td.empty {
        border: none;
      }
    </style>
  </head>
  <body>
    <h1>Display Google Sheet Web App</h1>
    <table><?!= getSheetData() ?></table>
  </body>
</html>

注:

  • this benchmark (Author: me)开始,我通过在Google Apps脚本端创建的方式将该HTML表放入您的HTML模板中.

  • 在这个修改中,它假设将一个链接放到一个单元格中.请注意这一点.

  • When you modified the Google Apps Script of Web Apps, please modify the deployment as a new version. By this, the modified script is reflected in Web Apps. Please be careful about this.

  • 你可以在我的报告"Redeploying Web Apps without Changing URL of Web Apps for new IDE (Author: me)"中看到这一点的详细情况.

参考资料:

Html相关问答推荐

试图让三个Divs与下面的另外三个对齐

如何找到FontAwese图标的Unicode值?

<;img>;和具有负边距的元素的堆叠顺序

防止SVG边框半径zoom

为什么我的搜索栏会出现在WONG位置?

使用HTML进行DAX测量

旧文本淡出,但新文本不会淡入,而是突然出现

获取标准的Python脚本,以便使用FASK对网站进行Flask

使用bash从html表格中提取表格

如何使链接组件内的内容不重新路由Next.js13

Swift 以编程方式在 YouTube 嵌入视频中进入全屏

在 WooCommerce 存档产品类别描述上添加阅读更多/阅读更少按钮

在 laravel 中使用 DomPDF 将数据导出为 pdf 时,第二列被拉伸

CSS Grid 布局:1 大图和 3 小图

如何使用CSS Select 同级元素的::before伪元素?

如何让一个 div 元素粘在另一个元素上?

那边界从何而来?

如何在没有容器的情况下沿基线将 div 中的元素居中?

如何使用 html 和 css 为卡片创建此背景框架

是否有一种静态方式可以根据暗模式 Select 一张或另一张图像?