我在谷歌電子表格中有一張圖片。按下按鈕，腳本就會啟動，它應該打開一個風格化的表格。相反，它打開了一個表格，但未能對其應用CSS樣式。我閱讀了谷歌的檔案，為樣式設計制作了一個單獨的檔案，并在主要的HTML檔案中加入了一個包含，如下所示
// <?!= include('styleheet'); ?>
我這樣做了。我得到了一個表格，里面是純文本。
如何使腳本真正處理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')
}
stylesheet.html檔案，包含了表格的CSS
。<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中的表格
。<! DOCTYPEhtml>
<html>
<head>
<base target="_top">/span>
**<?!= include('styleheet'); ?>**
</head>
<body>
< table width="98%" border="1" cellpadding="3px" cellspacing="0" style="w3-table-all">
<tr>
<td width="23%">/span>1. </td>1.
<td width="77%">/span>8: 30 - 9: 10</td>
</tr>/span>
<tr>/span>
<td>/span>2.</td>/span>
<td>/span>9:20 - 10:00</td>/span>
</tr>/span>
<tr>/span>
<td>/span>3.</td>/span>
<td>10:10 - 10:50</td>/span>
</tr>/span>
<tr>/span>
<td>/span>4.</td>/span>
<td>11:05 - 11:45</td>/span>
</tr>/span>
<tr>/span>
<td>/span>5.</td>/span>
<td>12:00 - 12:40</td>/span>
</tr>/span>
<tr>/span>
<td>/span>6.</td>/span>
<td>13:10 - 13:50</td>/span>
</tr>/span>
<tr>/span>
<td>/span>7.</td>/span>
<td>14:00 - 14:40</td>/span>
</tr>/span>
<tr>/span>
<td>8.</td>/span>
<td>14:50 - 15:30</td>/span>
</tr>/span>
<tr>/span>
<td>/span>9.</td>/span>
<td>15:35 - 16:15</td>/span>
</tr>/span>
</table>/span>
<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%">/span>1. </td>1.
<td width="77%">/span>8: 30 - 9: 00</td>
</tr>/span>
<tr>/span>
<td>/span>2.</td>/span>
<td>9:10 - 9:40</td>/span>
</tr>/span>
<tr>/span>
<td>/span>3.</td>/span>
<td>/span>9:50 - 10:20</td>/span>
</tr>/span>
<tr>/span>
<td>/span>4.</td>/span>
<td>10:35 - 11:05</td>/span>
</tr>/span>
<tr>/span>
<td>/span>5.</td>/span>
<td>11:20 - 11:50</td>/span>
</tr>/span>
<tr>/span>
<td>6.</td>
<td>12:20 - 12:50</td>/span>
</tr>/span>
<tr>/span>
<td>/span>7.</td>/span>
<td>13:00 - 13:30</td>/span>
</tr>/span>
<tr>/span>
<td>8.</td>/span>
<td>13:40 - 14:10</td>/span>
</tr>/span>
<tr>/span>
<td>/span>9.</td>/span>
<td>14:15 - 14:45</td>/span>
</tr>/span>
</table>/span>
</body>
</html>
uj5u.com熱心網友回復：
使用createTemplateFromFile代替，然后evaluate你的html。請看下面的最終腳本。
最終腳本：
function openDialog（） {
var html = HtmlService.createTemplateFromFile('studdu_laiki')
.評估()
.setHeight（600）。
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.showModalDialog(html, 'Stundu laiki')
}
輸出：
。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/315128.html
標籤：