时间戳

首页 > 解决方案 > 如何在谷歌应用脚​​本中重构 HTML 表？

html - 如何在谷歌应用脚​​本中重构 HTML 表？

问题描述

我有一个谷歌表，后面有一个生成电子邮件的脚本。电子邮件的正文是一个 HTML 表格。除了表格在电子邮件中的结构之外，这一切都很好。由于最后一行中链接的长度，第二列被推过，然后在文本和返回值之间有很大的空间。无论如何修改表结构以将第 2 列保持在第 1 列旁边？也许有一个对齐选项或允许链接溢出的东西？这是表格 HTML。

   

function form1Submit(e) {
      if(e.values && e.values[1] && e.values[2]) {
        var html='<table>';
        html+=Utilities.formatString('<tr><td>%s</td><td><strong>%s</strong></td><td>%s</td></tr>','&nbsp;','Safety Findings Comment:',e.values[7]);
        html+=Utilities.formatString('<tr><td>%s</td><td colspan ="2">%s</td><td>%s</td></tr>','&nbsp;','https://docs.google.com/spreadsheets/d/e/2PACX-1vQj3j6QgrCyvULYo1IeE3q9L9Gzvz2tVvNI8650nhl-L0cQwyx93tRIeuXPxxxxxxxxxxxxxxxxxxx/pubhtml#','&nbsp;' );
        html+='</table>';
    Logger.log(html);
    GmailApp.sendEmail(getGlobal('form1Email'), getGlobal('form1Subject'), '', {htmlBody:html});
  }
}

这是有效的更新脚本。我既使用了表格的格式，又使用了其中两列的格式。

function form1Submit(e) {
  if(e.values && e.values[1] && e.values[2]) {
    var url='https://docs.google.com/spreadsheets/d/e/2PACX-1vQj3j6QgrCyvULYo1IeE3q9L9Gzvz2tVvNI8650nhl-L0cQwyx93tRIeuXPxxxxxxxxxxxxxxxxxxx/pubhtml#';
    var html='<style>td,th{padding:overflow-wrap: break-word;}table{table-layout:fixed;width:100%;}</style><table>';
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;" colspan ="2"><font size="4" color="red"><b>%s</b></font></td><td style="width:65%;">%s</td></tr>','&nbsp;','**** DO NOT REPLY TO THIS EMAIL ****','&nbsp;' );
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;">%s</td><td style="width:65%;">%s</td></tr>','&nbsp;','&nbsp;','&nbsp;' );//empty line
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;">%s</td><td style="width:65%;">%s</td></tr>','&nbsp;','&nbsp;','&nbsp;' );//empty line
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;" colspan ="2">%s</td><td style="width:65%;">%s</td></tr>','&nbsp;','Please review findings','&nbsp;' );
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;" colspan ="2"><font size="5"><b>%s</b></font></td><td style="width:65%;">%s</td></tr>','&nbsp;','VISUAL WELDING AUDIT','&nbsp;' );
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;"><strong>%s</strong></td><td style="width:65%;">%s</td></tr>','&nbsp;','Date and Time of Audit:',e.values[0]);
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;"><strong>%s</strong></td><td style="width:65%;">%s</td></tr>','&nbsp;','Auditor:',e.values[1]); 
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;"><strong>%s</strong></td><td style="width:65%;">%s</td></tr>','&nbsp;','Line/Location Audited:',e.values[2]);
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;"><strong>%s</strong></td><td style="width:65%;">%s</td></tr>','&nbsp;','Area Responsible:',e.values[3]);
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;">%s</td><td style="width:65%;">%s</td></tr>','&nbsp;',RoGpf(e.values[4]),RoG(e.values[4]));
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;"><strong>%s</strong></td><td style="width:65%;">%s</td></tr>','&nbsp;','Person Notified:',e.values[9]);
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;"><strong>%s</strong></td><td style="width:65%;">%s</td></tr>','&nbsp;','Disposition:',e.values[5]);
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;"><strong>%s</strong></td><td style="width:65%;">%s</td></tr>','&nbsp;','Discontinuity Found:',e.values[6]);
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;"><strong>%s</strong></td><td style="width:65%;">%s</td></tr>','&nbsp;','Safety Findings Comment:',e.values[7]);
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;"><strong>%s</strong></td><td style="width:65%;">%s</td></tr>','&nbsp;','Additonal Comments:',e.values[8]);
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;">%s</td><td style="width:65%;">%s</td></tr>','&nbsp;','&nbsp;','&nbsp;' );//empty line
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;">%s</td><td style="width:65%;">%s</td></tr>','&nbsp;','&nbsp;','&nbsp;' );//empty line
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;" colspan ="2">%s</td><td style="width:65%;">%s</td></tr>','&nbsp;','Link to Dashboard:','&nbsp;' );
    html+=Utilities.formatString('<tr><td>%s</td><td style="width:35%;" colspan ="2">%s</td><td style="width:65%;">%s</td></tr>','&nbsp;',url,'&nbsp;' );
    html+='</table>';
Logger.log(html);
GmailApp.sendEmail(getGlobal('form1Email'), getGlobal('form1Subject'), '', {htmlBody:html});
  }
}

谢谢！

标签： htmlcssemailgoogle-apps-scripthtml-table

解决方案

我正准备回答您的问题，但这是您的代码：

function form1Submit(e) {
      if(e.values && e.values[1] && e.values[2]) {
        var html='<table>';
        html+=Utilities.formatString('<tr><td>%s</td><td><strong>%s</strong></td><td>%s</td></tr>','&nbsp;','Safety Findings Comment:',e.values[7]);
        html+=Utilities.formatString('<tr><td>%s</td><td colspan ="2">%s</td><td>%s</td></tr>','&nbsp;','https://docs.google.com/spreadsheets/d/e/2PACX-1vQj3j6QgrCyvULYo1IeE3q9L9Gzvz2tVvNI8650nhl-L0cQwyx93tRIeuXPxxxxxxxxxxxxxxxxxxx/pubhtml#','&nbsp;' );
        html+='</table>';
    Logger.log(html);
    GmailApp.sendEmail(getGlobal('form1Email'), getGlobal('form1Subject'), '', {htmlBody:html});
  }
}

而且我不知道 e.values 是什么样子，所以我真的不知道如何测试您的代码，因为我有未定义的变量。因此，尽管您的示例可能很小，但它是不可重现的。

所以我做了我自己的输入。我还在对话框中显示结果，因为我不想发送电子邮件。css 在 html 字符串中。据推测，您可以在电子邮件中完成这项工作。

function form1Submit(e) {
      if(e.values && e.values[1] && e.values[2]) {
        var url='https://docs.google.com/spreadsheets/d/e/2PACX-1vQj3j6QgrCyvULYo1IeE3q9L9Gzvz2tVvNI8650nhl-L0cQwyx93tRIeuXPxxxxxxxxxxxxxxxxxxx/pubhtml#';
        var html='<style>td,th{padding:2px;border:1px solid black;overflow-wrap: break-word;}table{table-layout:fixed;width:100%;}</style><table>';
        html+=Utilities.formatString('<tr><td>&nbsp;</td><td><strong>Safety Findings</strong></td><td>%s</td></tr>',e.values[7]);
        html+=Utilities.formatString('<tr><td>&nbsp;</td><td>%s</td><td>&nbsp;</td></tr>',url);
        html+='</table>';
    Logger.log(html);
    //GmailApp.sendEmail('email', 'Subjecet', '', {htmlBody:html});
    SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(html), "Test");    

  }
}

function testAbove() {
  var e={values:['one','two','three','four','five','six','seven','eight','nine']};
  form1Submit(e) 
}

对话框如下所示：

在此处输入图像描述

你也可以这样做：

function form1Submit(e) {
      if(e.values && e.values[1] && e.values[2]) {
        var url='https://docs.google.com/spreadsheets/d/e/2PACX-1vQj3j6QgrCyvULYo1IeE3q9L9Gzvz2tVvNI8650nhl-L0cQwyx93tRIeuXPxxxxxxxxxxxxxxxxxxx/pubhtml#';
        var html='<style>td,th{padding:2px;border:1px solid black;overflow-wrap: break-word;}table{table-layout:fixed;width:100%;}</style><table>';
        html+=Utilities.formatString('<tr><td style="width:10%;">&nbsp;</td><td style="width:60%;"><strong>Safety Findings</strong></td><td style="width:30%;">%s</td></tr>',e.values[7]);
        html+=Utilities.formatString('<tr><td>&nbsp;</td><td>%s</td><td>&nbsp;</td></tr>',url);
        html+='</table>';
    Logger.log(html);
    //GmailApp.sendEmail('email', 'Subjecet', '', {htmlBody:html});
    SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(html), "Test");    

  }
}

在此处输入图像描述

您可以通过分别调整每列的宽度来调整它。

推荐阅读