如何在谷歌应用程序脚本中重构 HTML 表？

Question

我有一个谷歌表，背后有一个生成电子邮件的脚本。 电子邮件的正文是一个 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}); } }

谢谢！

Answer 1

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

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");    

  }
}

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