Como percebi que os dados do seu select
vinham de um objeto, fiz uma maneira de criar uma tabela dinâmica a partir de um array de objetos. Imagino que seja semelhante ao que você possui no exemplo da pergunta. Não sei se era exatamente o que queria, mas serve para ilustrar bem.
O meu objeto exemplo e função JQuery segue abaixo:
var dados = [{
"Nome": "Maria",
"Idade": "18",
"fone": "8888-9999"
}, {
"Nome": "João",
"Idade": "45",
"fone": "9999-9999"
}, {
"Nome": "Márcia",
"Idade": "35",
"fone": "4444-9999"
}];
function createTable(obj){
// Criar a table
$('body').append('<table></table>'); // Adiciona a tabela ao body
var table = $('body').children('table'); // Seleciona a tabela
// Criar o head da table
var thead = "<tr>";
for (title in obj[0]) {
thead += "<th>" + title + "</th>";
}
thead += "</tr>";
//Criar o body da table
var tbody = "<tr>";
obj.forEach(function(el, i) {
for (item in el) {
tbody += "<td>" + el[item] + "</td>";
}
tbody += "</tr>";
})
table.append(thead).append(tbody); // Adiciona a tabela completa ao body
}
createTable(dados); //Aplica a função ao objeto desejado.
table {
background: #CCC;
border: 1px solid #fff;
}
table td {
padding: 15px;
border: 1px solid #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
No exemplo acima, os dados serão mudados com uma função, a qual criará a tabela, para se adicionar dados, seria já um processo diferente, já que estamos falando de JQuery.
Outra maneira bem simples de se fazer isso é através do framework AngularJs. Caso já tenha ouvido falar, deve saber da capacidade deste, caso não, tenha em mente isso.
Com o AngularJs, graças ao Data Biding, você se preocupa apenas com a manipulação dos dados, o Model, e o Controller tomará a responsailidade de fazer a interação do Model e a View. Esse sistema é o MVC.
Há um exemplo abaixo da criação tabela a partir de um objeto. Em que se poderá adicionar novos itens a tabela HTML, apenas ao adicionar os mesmos ao objeto, sem nenhum contato direto com o HTML. Como os dados estão mudandos, automaticamente a view também mudará. Não se preocupe com os atributos do framework, se atente a ideia principal de dinamicidade.
Segue o código em Angular:
function tableCtrl($scope) {
$scope.dados = [{
"nome": "Maria",
"idade": "18",
"fone": "8888-9999"
}, {
"nome": "João",
"idade": "45",
"fone": "9999-9999"
}, {
"nome": "Márcia",
"idade": "35",
"fone": "4444-9999"
}];
$scope.adicionar = function(){
$scope.dados.push({
"nome": $scope.nome,
"idade": $scope.idade,
"fone": $scope.fone
})
$scope.nome = "";
$scope.idade = "";
$scope.fone = "";
$scope.form.$setPristine();
}
}
table {background: #CCC;border: 1px solid #fff;}
table td {padding: 15px;border: 1px solid #fff;}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="tableCtrl">
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
<th>Fone</th>
</tr>
<tr ng-repeat="dado in dados">
<td>{{dado.nome}}</td>
<td>{{dado.idade}}</td>
<td>{{dado.fone}}</td>
</tr>
</table>
<br>
<form name="form" ng-submit="adicionar()" >
Nome: <input type="text" ng-required="true" ng-pattern="/[a-z]/g" ng-model="nome" ><br>
Idade: <input type="text" ng-required="true" ng-pattern="/[0-9]/g" ng-model="idade" ><br>
Fone: <input type="text" ng-required="true" ng-pattern="/^\d{4,5}-\d{4}$/" ng-model="fone" ><br>
<input ng-disabled="form.$invalid" type="submit" value="Adicionar">
</form>
</div>