添加 <select>代替<td>

Question

I have this code that creates a table with 7 columns.

The table returns like this:
[1][2][3][4][5][6][7] << headers
[1][2][3][4][5][6][7] << values

Where the 7th column is an <a> button inside of a <td> .

I'm trying to figure out how to add a <select> with <option>'s inside of the 6th columns <td> .

  //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;

I'm assuming I'd have to implement an if statement or a for loop that counts to 5 and then adds the inside of the 6th . I'm not really sure what the best way to do this is, or if this is even the right way to do it.

But any help would be appreciated.

Answer 1

Just figure out where you want to put it and given the below function your optionscsv string and valuescsv string and it will generate all of the tags for the select and options opening and closing tags.

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;
}

And below I took a guess at where you might wish to put it and how you could do it. But I might be wrong so come back for more help if needed.

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
        }
      }
    }