如何在Google电子表格的Htmlservice上突出显示选定的行?

时间:2019-11-08 00:47:17

标签: google-apps-script google-sheets spreadsheet selecteditem selected

我要 制作多个选定的行 ,以将其 插入表 ,我刚刚将<在Google电子表格上使用HtmlService来实现strong> 。这是代码:

function showListSheet() {
  var s = SpreadsheetApp;
  var ss = s.getActiveSpreadsheet();
  var sss = ss.getSheets();
  var result = "<head><style type='text/css'>.gridview {display: inline-block; border-collapse: collapse; margin: 0px 4px 4px 0; box-shadow: 3px 3px 4px #bbb;} .gridview, .gridview td,  .gridview th {margin: 0; border:  1px solid #cccccc;} .gridview th {font-size: 1.1em; height: 25px; text-align: center; font-weight: normal; color: #F9F9F9; background: #337EB5;} .gridview th a, .gridview th a:link, .gridview th a:visited, .gridview th a:active {color: #F9F9F9; text-decoration: none;} .gridview th a:hover {text-decoration: underline;} .gridview tr {background: #F4F9FD;} .gridview tr:nth-child(odd)  {background-color: #F4F9FD;} .gridview tr:nth-child(even)  {background-color: #EDF5FC;} .gridview td  {font-weight: normal; text-align: left; vertical-align: top;} .gridview td {padding: 4px 0 5px 9px;} .gridview tfoot td {background-color: #EEEEEE;} .gridview tfoot td .page {color: #000000; font-weight: bold;} .gridview tr.subfoot, .gridview tr.subfoot td {background-color: #FFFFEC;} .gridview tr:hover td, .gridview tbody tr:hover td {background-color: #feb4cc; cursor: pointer; color: white;} .gridview .selected, .gridview tbody .selected {background-color: #E74C3C;  -webkit-animation: miniRainBow 20s infinite;  animation: miniRainBow 20s infinite; color: #fff;}</style></head><table border=1 class='gridview'>";
    for (var i = 0; i < sss.length; i++) {
        result += "<tr OnClick=\"this.id.attr('class', 'selected')\" id=\"tgt\">"
          result += "<td><input type='checkbox' onClick='return false;' readonly/></td><td>" + sss[i].getName() + "</td>";
      result += "</tr>";
    }
    result += "</table>";

  ss.show(HtmlService.createHtmlOutput(result)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setTitle("L i s t   O f   S h e e t   . . .")
    .setHeight(500)
    .setWidth(300));
}

我应该将这两行放在下面:

....
<style type='text/css'>
....

.highlighted {background-color: orange !important; color: #fff;}
</style>

....
        result += **"<tr OnClick=\"this.id.attr('class', 'highlighted')\" id=\"tgt\" class=\"\">"
....
}

0 个答案:

没有答案