title: Export html table that contain a drop down list with Javascript
body: <p>I have a table that allow user to add more column, inside the added column's cell there is a drop down list option. I tried to implement an export csv function but it seem like only work on table that is without drop down list. I do not know how can I get the selected item in the drop down list.
  <a href="https://i.stack.imgur.com/1YrmS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1YrmS.png" alt="enter image description here" /></a></p>
  <p>The output of my export:</p>
  <p><a href="https://i.stack.imgur.com/ooGRP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ooGRP.png" alt="enter image description here" /></a></p>
  <p>As you can see the exported file doesn't format the table properly and its total mess. All my drop down list options are show on the <code>A</code> column, but what I really need is only show the selected value on their correct column which are <code>Group1</code>.</p>
  <p><em>Question</em></p>
  <ol>
  <li>How can I export csv files with correct format with the selected drop down list value?</li>
  <li>If user choose <code>Null</code> as their option, how can I make the exported csv column empty? For example: if user choose <code>Null</code>, the exported csv file should not contain any value and only store an empty cell.</li>
  </ol>
  <p><strong>Full Code:</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }
  
  td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }
  
  tr:nth-child(even) {
    background-color: #dddddd;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h2&gt;HTML Table&lt;/h2&gt;
  
  &lt;h2&gt;HTML Table&lt;/h2&gt;
  
  &lt;table id=&quot;member_table&quot;&gt;
    &lt;tr&gt;
      &lt;th&gt;Company&lt;/th&gt;
      &lt;th&gt;Contact&lt;/th&gt;
      &lt;th&gt;Country&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Alfreds Futterkiste&lt;/td&gt;
      &lt;td&gt;Maria Anders&lt;/td&gt;
      &lt;td&gt;Germany&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Centro comercial Moctezuma&lt;/td&gt;
      &lt;td&gt;Francisco Chang&lt;/td&gt;
      &lt;td&gt;Mexico&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Ernst Handel&lt;/td&gt;
      &lt;td&gt;Roland Mendel&lt;/td&gt;
      &lt;td&gt;Austria&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Island Trading&lt;/td&gt;
      &lt;td&gt;Helen Bennett&lt;/td&gt;
      &lt;td&gt;UK&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Laughing Bacchus Winecellars&lt;/td&gt;
      &lt;td&gt;Yoshi Tannamuri&lt;/td&gt;
      &lt;td&gt;Canada&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Magazzini Alimentari Riuniti&lt;/td&gt;
      &lt;td&gt;Giovanni Rovelli&lt;/td&gt;
      &lt;td&gt;Italy&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
   &lt;h1&gt;Existing Group&lt;/h1&gt;
        &lt;p&gt;IT, Cleaning, Accountant&lt;/p&gt;
        &lt;h1&gt;Add New Group&lt;/h1&gt;
        &lt;p id=&quot;myP&quot;&gt;&lt;/p&gt;
        &lt;input type=&quot;tel&quot; id=&quot;group&quot; name=&quot;group&quot; placeholder=&quot;enter group name&quot;&gt;
        &lt;br&gt;&lt;br&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-sm&quot;&gt;Submit&lt;/button&gt;
     
  
  &lt;button onclick=&quot;javascript:appendColumn()&quot;&gt;Add column&lt;/button&gt;
    &lt;button onclick=&quot;export2csv()&quot;&gt;csv&lt;/button&gt;
  
  &lt;script&gt;
  function createSelectEl(values){
      var select = document.createElement(&quot;select&quot;);
      select.name = &quot;group1&quot;;
      select.id = &quot;groupId&quot;
      // 1st option
      var option = document.createElement(&quot;option&quot;);
      option.text = 'Null';
      select.appendChild(option);
      for (const val of values)
      {
          var option = document.createElement(&quot;option&quot;);
          option.value = val;
          option.text = val;
          select.appendChild(option);
      }
      return select;
  }
  
  let groupNum = 1;
  const tableEl = document.getElementById('member_table');
  
  // append column to the HTML table
  function appendColumn() {
  
    // open loop for each row and append cell
    for (let i = 0; i &lt; tableEl.rows.length; i++) {
      const values = [&quot;IT&quot;, &quot;Cleaning&quot;, &quot;Accountant&quot;];
      const myP  = document.querySelector('p#myP');
      var categories = myP.innerText.split(',');
      for(let j =0; j &lt; categories.length; j++){
      values.push(categories[j]);
      }
      createCell(tableEl.rows[i].insertCell(tableEl.rows[i].cells.length), createSelectEl(values), 'col');
      // createCell(tableEl.rows[i].insertCell(tableEl.rows[i].cells.length), i, 'col');
    }
  
    tableEl.rows[0].querySelector('td:last-child').textContent = 'Group' + groupNum;
    groupNum++;
  }
  
  // create DIV element and append to the table cell
  function createCell(cell, text, style) {
    var div = document.createElement('div'); // create DIV element
      //txt = document.createTextNode(text); // create text node
    // div.appendChild(txt); // append text node to the DIV
    div.appendChild(text);
    div.setAttribute('class', style); // set DIV class attribute
    div.setAttribute('className', style); // set DIV class attribute for IE (?!)
    cell.appendChild(div); // append DIV to the table cell
  }
  &lt;/script&gt;
  
  &lt;script&gt;
  function export2csv() {
    let data = &quot;&quot;;
    const tableData = [];
    const rows = document.querySelectorAll(&quot;table tr&quot;);
    for (const row of rows) {
      const rowData = [];
      for (const [index, column] of row.querySelectorAll(&quot;th, td&quot;).entries()) {
        // To retain the commas in the &quot;Description&quot; column, we can enclose those fields in quotation marks.
        if ((index + 1) % 3 === 0) {
          rowData.push('&quot;' + column.innerText + '&quot;');
        } else {
          rowData.push(column.innerText);
        }
      }
      tableData.push(rowData.join(&quot;,&quot;));
    }
    data += tableData.join(&quot;\n&quot;);
    const a = document.createElement(&quot;a&quot;);
    a.href = URL.createObjectURL(new Blob([data], { type: &quot;text/csv&quot; }));
    a.setAttribute(&quot;download&quot;, &quot;data.csv&quot;);
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
  &lt;/script&gt;
  &lt;script&gt;
  const submit = document.querySelector('button');
  const input  = document.querySelector('input');
  const select = document.querySelector('select');
  const myP    = document.querySelector('p#myP');
  
  submit.addEventListener('click', function(e)
  {
    const values = input.value.split(',');
    
    if (myP.innerText == '')
    {
      myP.innerText = values;
    }
    else
    {
      myP.innerText += ', ' + values;
    }
    
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  
  
  </code></pre>