Convert HTML table to select with Javascript

Question

I am trying to convert a HTML table to a select element with options instead of rows with Javascript. I found ways to do this in reverse and so I came to this HTML:

function showTableData() {
  document.getElementById('info').innerHTML = "";
  var myTab = document.getElementById('mytable');

  for (i = 1; i < myTab.rows.length; i++) {
    var objCells = myTab.rows.item(i).cells;
    for (var j = 0; j < objCells.length; j++) {
      info.innerHTML = info.innerHTML + ' ' + objCells.item(j).innerHTML;
    }
    info.innerHTML = '<option>' + info.innerHTML + '</option>';
  }
}

<table style="width: 100%;" id="mytable">
  <tbody>
    <tr>
      <td>Vespa</td>
      <td>PX 125</td>
      <td>125 ccm</td>
      <td>M093</td>
      <td>2002 - 2006</td>
      <td><a title="Zu Modell wechseln" href="fahrzeuge/vespa/101-125ccm/px-125-m093">Zu Modell wechseln</a></td>
    </tr>
    <tr>
      <td>Vespa</td>
      <td>PX 125</td>
      <td>125 ccm</td>
      <td>M74</td>
      <td>2010 - 2016</td>
      <td><a title="Zu Modell wechseln" href="fahrzeuge/vespa/101-125ccm/px-125-m74">Zu Modell wechseln</a></td>
    </tr>
    <tr>
      <td>Vespa</td>
      <td>P 125 X</td>
      <td>125 ccm</td>
      <td>VNX1T</td>
      <td>1979 - 1984</td>
      <td><a title="Zu Modell wechseln" href="fahrzeuge/vespa/101-125ccm/p-125-x-vnx1t">Zu Modell wechseln</a></td>
    </tr>
    <tr>
      <td>Vespa</td>
      <td>PX 125</td>
      <td>125 ccm</td>
      <td>VNX2T</td>
      <td>1984 - 1999</td>
      <td><a title="Zu Modell wechseln" href="fahrzeuge/vespa/101-125ccm/px-125-vnx2t">Zu Modell wechseln</a></td>
    </tr>
    <tr>
      <td>Vespa</td>
      <td>PX 125 T5</td>
      <td>125 ccm</td>
      <td>VNX5T</td>
      <td>1985 - 1988</td>
      <td><a title="Zu Modell wechseln" href="fahrzeuge/vespa/101-125ccm/px-125-t5-vnx5t">Zu Modell wechseln</a></td>
    </tr>
  </tbody>
</table>

<p><input type="button" id="bt" value="Show Table Data" onclick="showTableData()" /></p>
<select id="info"></select>

It works so far, that I get Options but weirdly only the first table row is actually in the last option of the list. I can't see the probably very obviously mistake I'm doing here.

Answer 1

1. info is not defined
2. info.innerHTML = '<option>' + info.innerHTML + '</option>'; wraps it in a option but you'll need to do that for each <tr> instead off after the loop

---

I'd recommend using map() to loop over the .cells, then use textContent to get the text value (needed to get the text in the image)

Then you can use join() to make it a full string, which you can append to the info wrapped in an <option>

---

So the available options will be:

Vespa PX 125 125 ccm M74 2010 - 2016 Zu Modell wechseln
Vespa P 125 X 125 ccm VNX1T 1979 - 1984 Zu Modell wechseln
Vespa PX 125 125 ccm VNX2T 1984 - 1999 Zu Modell wechseln
Vespa PX 125 T5 125 ccm VNX5T 1985 - 1988 Zu Modell wechseln

---

Which you can test in this demo:

function showTableData() {
    var myTab = document.getElementById('mytable');
    var info = document.getElementById('info');
    
    info.innerHTML = "";

    for (i = 1; i < myTab.rows.length; i++) {
        var objCells = [ ...myTab.rows.item(i).cells ];
        var texts = objCells.map(o => o.textContent);
        
        info.innerHTML += '<option>' + texts.join(' ') + '</option>';
    }
}

showTableData();

table { display: none; }

<table style="width: 100%;" id="mytable"> <tbody> <tr> <td>Vespa</td> <td>PX 125</td> <td>125 ccm</td> <td>M093</td> <td>2002 - 2006</td> <td><a title="Zu Modell wechseln" href="fahrzeuge/vespa/101-125ccm/px-125-m093">Zu Modell wechseln</a></td> </tr> <tr> <td>Vespa</td> <td>PX 125</td> <td>125 ccm</td> <td>M74</td> <td>2010 - 2016</td> <td><a title="Zu Modell wechseln" href="fahrzeuge/vespa/101-125ccm/px-125-m74">Zu Modell wechseln</a></td> </tr> <tr> <td>Vespa</td> <td>P 125 X</td> <td>125 ccm</td> <td>VNX1T</td> <td>1979 - 1984</td> <td><a title="Zu Modell wechseln" href="fahrzeuge/vespa/101-125ccm/p-125-x-vnx1t">Zu Modell wechseln</a></td> </tr> <tr> <td>Vespa</td> <td>PX 125</td> <td>125 ccm</td> <td>VNX2T</td> <td>1984 - 1999</td> <td><a title="Zu Modell wechseln" href="fahrzeuge/vespa/101-125ccm/px-125-vnx2t">Zu Modell wechseln</a></td> </tr> <tr> <td>Vespa</td> <td>PX 125 T5</td> <td>125 ccm</td> <td>VNX5T</td> <td>1985 - 1988</td> <td><a title="Zu Modell wechseln" href="fahrzeuge/vespa/101-125ccm/px-125-t5-vnx5t">Zu Modell wechseln</a></td> </tr> </tbody> </table>

<select id="info"></select>

Note: I've removed the button and called the function on load so the options will be visible without any user interaction.