在 <td> 中添加 <select>答案

【问题标题】：Adding <select> inside of <td>在 <td> 中添加 <select>
【发布时间】：2017-08-05 22:16:12
【问题描述】：

我有这段代码可以创建一个包含 7 列的表。

表格返回如下：
[1][2][3][4][5][6][7] [1][2][3][4][5][6][7]

第 7 列是 <td> 内的 <a> 按钮。

我正在尝试弄清楚如何在第 6 列 <td> 内添加带有 <option>'s 的 <select>。

  //create table
  var artistFileValues = artistFile.getDataRange().getValues();
  var isHeader = true;
  var table = "<table id='table-noValues'>\n";
  var caption = "<caption>" + name + "</caption>\n";

  table += caption;

  for (var i = 0; i < artistFileValues.length; i++)
  {
    table += "<tr>\n";

    for (var j = 0; j < artistFileValues[i].length; j++)
    {
      if (isHeader)
      {
        table += "<th>" + artistFileValues[i][j] + "</th>\n"; //headers
        if (j == artistFileValues[i].length - 1) //if last header in row, add another cell with 'add' button
        {
          table += "<th style='text-align: center;'>" + "<a id='addButton' onclick=\x22addRow(this)\x22>" + "&plus;" + "</a>" + "</th>\n"; //'+' button
        }
      }
      else
      {
        table += "<td contenteditable='false'>" + artistFileValues[i][j] + "</td>\n"; //values
        if (j == artistFileValues[i].length - 1) //if last data in row, add another cell with 'delete' button
        {
          table += "<td style='text-align: center;'>" + "<a id='deleteButton' onclick=\x22deleteRow(this)\x22>" + "&times;" + "</a>" + "</td>\n"; //'x' button
        }
      }
    }
    isHeader = false;
    table += "</tr>\n";
  }
  table += "</table>";
  table += "<button id='calculateButton' onclick='calculate()'>" + "Calculate" + "</button>"; //add calculate button to bottom of table
  return table;

我假设我必须实现一个 if 语句或一个计数为 5 的 for 循环，然后添加 6th 的内部。我不确定最好的方法是什么，或者这是否是正确的方法。

但我们将不胜感激。

【问题讨论】：

成为主题首先向我们展示您的尝试以及失败的原因。
我会为此使用模板化的 HTML。我所做的是有两个 HTML 文件，一个用于大部分固定的 HTML，然后一个用于每一行的模板。它变得复杂，但我的观点是：对于不会改变的 HTML，只需有一个具有基本结构的 HTML 文件，然后将要改变的部分有一个“scriptlet”。无论哪种方式，它都会变得复杂且难以调试。在某种程度上，您是在问一个调试问题。连接文本很棒。我一直都在使用它，但我也喜欢使用带有我替换的合并字段的模板文本。
例如：var myOptionTemplate = "<option my_Merge_field_for_Value>merge_field_for_displayed_text</option>" 然后用replace()替换值：var optionHtml = myOptionTemplate.replace("my_Merge_field_for_Value",thisRowValue)
@SandyGood 我还有其他 html 文件。该表返回正常，它只是在内为我遇到问题的第 6 列制作了 ?

标签： javascript html google-apps-script

【解决方案1】：

只要弄清楚你想把它放在哪里，然后给下面的函数你的 optionscsv 字符串和 valuescsv 字符串，它就会为 select 和 options 开始和结束标签生成所有标签。

function mySelect(optionscsv,valuescsv)
{
  var optionscsv = (typeof(optionscsv) !== 'undefined')?optionscsv : null;
  var valuescsv = (typeof(valuescsv) !== 'undefined')?valuescsv : null;
  var s='<select>';
  if(valuescsv && optionscsv)
  {
    var optionsA = optionscsv.split(',');
    var valuesA = valuescsv.split(',');
    if(optionsA.length == valuesA.length)
    {
      for(var i = 0; i < optionsA.length; i++)
      {
        s += '<option value="' + valuesA[i] + '">' + optionsA[i] + '</option>';
      }
      s += '</select>';
    }
    else
    {
      s ='';
    }
    
  }
  else
  {
    s = '';
  }
  return s;
}

下面我猜测了你可能希望把它放在哪里以及如何做到这一点：

for (var j = 0; j < artistFileValues[i].length; j++)
    {
      if (isHeader)
      {
        table += "<th>" + artistFileValues[i][j] + "</th>\n"; //headers
        if (j == artistFileValues[i].length - 1) //if last header in row, add another cell with 'add' button
        {
          table += "<th style='text-align: center;'>" + "<a id='addButton' onclick=\x22addRow(this)\x22>" + "&plus;" + "</a>" + "</th>\n"; //'+' button
        }
      }
      else
      {
        if(j!==5)//I'm guessing this is the sixth column
        {
            table += "<td contenteditable='false'>" + artistFileValues[i][j] + "</td>\n"; //values
        }
        else
        {
            var s = mySelect(optionscsv,valuescsv);
            table += "<td contenteditable='false'>" + artistFileValues[i][j] + s + "</td>\n"; //values
        }
        if (j == artistFileValues[i].length - 1) //if last data in row, add another cell with 'delete' button
        {
          table += "<td style='text-align: center;'>" + "<a id='deleteButton' onclick=\x22deleteRow(this)\x22>" + "&times;" + "</a>" + "</td>\n"; //'x' button
        }
      }
    }

【讨论】：