Google 表格应用脚本无法处理 CSS 样式

Liepāja Liedaga 中学

我在谷歌电子表格中有一张图片。按下按钮会触发脚本,该脚本应该打开一个风格化的表格。相反,它会打开一个表格,但无法对其应用 CSS 样式。我阅读了关于制作单独的文件样式并将包含在主 HTML 文件中的 Google 文档,如下所示

//   <?!= include('stylesheet'); ?>

我这样做了。我得到一个带有纯文本的表格。在此处输入图片说明

如何让脚本真正处理 CSS 样式?

gs文件:

 function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
};

function openDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Stundu_laiki')
       .setHeight(600);
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .showModalDialog(html, 'Stundu laiki')
      
}

带有表格 CSS 的 stylesheet.html 文件

<style>
.w3-table,.w3-table-all{}.w3-table-all{border:1px solid #ccc}
.w3-table-lined tr:nth-child(odd){background-color:#fff}.w3-table-lined tr:nth-child(even){background-color:#f1f1f1}
.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
</style>

stundu_laiki.html 带一张桌子

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    **<?!= include('stylesheet'); ?>**
  </head>
  <body>
    <table width="98%" border="1" cellpadding="3px" cellspacing="0" style="w3-table-all">
            <tr>
              <td width="23%">1.</td>
              <td width="77%">8:30 - 9:10</td>
            </tr>
            <tr>
              <td>2.</td>
              <td>9:20 - 10:00</td>
            </tr>
            <tr>
              <td>3.</td>
              <td>10:10 - 10:50</td>
            </tr>
            <tr>
              <td>4.</td>
              <td>11:05 - 11:45</td>
            </tr>
            <tr>
              <td>5.</td>
              <td>12:00 - 12:40</td>
            </tr>
            <tr>
              <td>6.</td>
              <td>13:10 - 13:50</td>
            </tr>
            <tr>
              <td>7.</td>
              <td> 14:00 - 14:40</td>
            </tr>
            <tr>
              <td>8.</td>
              <td>14:50 - 15:30</td>
            </tr>
            <tr>
              <td>9.</td>
              <td>15:35 - 16:15</td>
            </tr>
          </table>

<h2> Saīsināto dienu stundu laiki</h2>

<table width="98%" border="1" cellpadding="3px" cellspacing="0" class="w3-table-all">
    <tr>
      <td width="23%">1.</td>
      <td width="77%">8:30 - 9:00</td>
    </tr>
    <tr>
      <td>2.</td>
      <td>9:10 - 9:40</td>
    </tr>
    <tr>
      <td>3.</td>
      <td>9:50 - 10:20</td>
    </tr>
    <tr>
      <td>4.</td>
      <td>10:35 - 11:05</td>
    </tr>
    <tr>
      <td>5.</td>
      <td>11:20 - 11:50</td>
    </tr>
    <tr>
      <td>6.</td>
      <td>12:20 - 12:50</td>
    </tr>
    <tr>
      <td>7.</td>
      <td> 13:00 - 13:30</td>
    </tr>
    <tr>
      <td>8.</td>
      <td>13:40 - 14:10</td>
    </tr>
    <tr>
      <td>9.</td>
      <td>14:15 - 14:45</td>
    </tr>
  </table> 
  </body>
</html>
纳粹党

使用createTemplateFromFile而不是那么evaluate您的HTML。请参阅下面的最终脚本。

最终脚本:

function openDialog() {
  var html = HtmlService.createTemplateFromFile('stundu_laiki')
    .evaluate()
    .setHeight(600);
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
    .showModalDialog(html, 'Stundu laiki')    
}

输出:

在此处输入图片说明

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章