如何更改單元格中的文本顏色

Question

所以我的老板給我發了這個帶有 Apps Script 擴展的電子表格（我查了一下，上面寫着 JavaScript）我不是程序員。 它應該在 email 中自動發送電子表格並顯示表格（這部分工作正常）。

我的老板想問我是否可以查看 html 部分，也許我可以將文本的“DONE”部分更改為綠色而不是黑色。

這是現在的樣子

代碼.gs

var config = {
  // Google Sheet configuration
  googleSheet: "https://docs.google.com/spreadsheets/d/asdfghjkl/edit",  // ID or Sheet URL
  sheetName: "email-schedule",
  tableRange: "B4:G9",   // Named Range OR Range i.e A6:B9

  // change backgroud color of table header row
  bgColor: "lightblue",

  //  Email Configuration
  toEmail: "momoiru97@gmail.com",
  cc: "", // comma separated email ids.
  subject: "Table from GoogleSheet",
  
  // Body text table
  body: `Hello,
  I am xxx.
  Link to file: xxx`,
  
  // Footer Signature after table
  signature: `Thank you,
    xxx`,
};


var isDate = function(date) {
  return (date instanceof Date);
}


function sendEmail() {
  // Function to send Email

  // get table data
  var tableData = getData();
  // get email template
  var htmlTemplate = getEmailTemplate(tableData);

  // Send Email
  MailApp.sendEmail({
    to: config.toEmail,
    subject: config.subject,
    cc: config.cc,
    htmlBody: htmlTemplate
  });
  Logger.log(`Email send successfully to '${config.toEmail}'.`);
}

function getEmailTemplate(tableData) {
  // Function to Get Template for Email

  // Create GMail Template
  const htmlTemplate = HtmlService.createTemplateFromFile('emailTemplate');

  htmlTemplate.body = config.body;
  htmlTemplate.headers = tableData.headers;
  htmlTemplate.rows = tableData.rows;
  htmlTemplate.footer = config.signature;
  htmlTemplate.bgColor = config.bgColor;

  const htmlForEmail = htmlTemplate.evaluate().getContent();
  // Logger.log(htmlForEmail);

  return htmlForEmail;
}

function getData() {
  // Function to Get Data

  // Open Sheet
  var gsheet;
  if (config.googleSheet.includes("docs.google.com")) {
    gsheet = SpreadsheetApp.openByUrl(config.googleSheet);
  }
  else {
    gsheet = SpreadsheetApp.openById(config.googleSheet)
  }

  Logger.log("Your Google Sheet Name: " + gsheet.getName());
  Logger.log("Your Google Sheet URL: " + gsheet.getUrl());
  
  // var sheet = gsheet.getSheets()[0]; // Select by index
  var sheet = gsheet.getSheetByName(config.sheetName); // select by name
  Logger.log("Selected Sheet Name: " + sheet.getName())

  // Get Table
  var values = sheet.getRange(config.tableRange).getValues();
  var rows = values.slice(1);

  // Parse Data
  for (var i=0; i < rows.length; i++ ) {
    for (var j=0; j < rows[i].length; j++) {
      const cell = rows[i][j];
      if (isDate(cell)) {
         Logger.log(cell);
         const options = {month: 'short' };
         rows[i][j] = `${cell.getDate()}-${cell.toLocaleString(undefined, options)}-${cell.getFullYear()}`;
      }
    }
  }

  // Store Data
  var tableData = {
    headers: values[0],
    rows: rows
  };

  // Logger.log(JSON.stringify(values));
  Logger.log(JSON.stringify(tableData));
  return tableData;
}

這是 html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>

    * {
      font-family: Verdana sans-serif;
      font-size: 12pt;
    }
  
  table {
     border-collapse: collapse;
  }

  table, th, td {
  border: 1px solid black;
  font-size:15px;
  padding: 8px;
  color: black;
}
tr:hover {background-color: #ddd;}

th, thead {
  background-color: <?= bgColor ?>;
}

.table-container, .footer {
  margin-top: 10px;
}

</style>  
  </head>
  <body>
    <!-- Body -->
    <div>
      <pre><?= body ?></pre>
    </div>

    <!-- Table -->
    <div class="table-container">
      <table>
        <thead>
          <? headers.forEach(cell => {?>
            <th><?= cell ?></th>
          <?})?>
        </thead>

        <tbody >
          <? rows.forEach(row => {?>
            <tr> 
              <? row.forEach(cell => {?>
                <td style="text-align:center"><?= cell ?></td>
              <?})?>
            </tr>
          <?})?>
        </tbody>

      </table>
    </div>

    <!-- Footer -->
    <div class="footer">
      <pre><?= footer ?></pre>
    </div>

  </body>
</html>

我嘗試將color:black更改為color:green但它改變了整個文本的顏色。

 table, th, td {
  border: 1px solid black;
  font-size:15px;
  padding: 8px;
  color: green;

希望它看起來像“完成”，那么顏色應該是“綠色”。 希望它看起來像這樣

Answer 1

嘗試替換Code.gs中的這一行：

  var rows = values.slice(1);

...和：

  var rows = values.slice(1).map(row => row.map(value => value === 'Done' ? '<span style="color:green;">Done</span>' : value));;

emailTemplate.html中的這一行：

                <td style="text-align:center"><?= cell ?></td>

...和：

                <td style="text-align:center"><?!= cell ?></td>

如何更改單元格中的文本顏色

問題描述

1 個解決方案

解決方案1
0 已采納 2023-01-12 21:14:51

如何更改單元格中的文本顏色

問題描述

1 個解決方案

解決方案1 0 已采納 2023-01-12 21:14:51

解決方案1
0 已采納 2023-01-12 21:14:51