Since I realized that the data of your select
came from an object, I did a way to create a PivotTable from an array of objects. I imagine it to be similar to what you have in the example of the question. I do not know if it was exactly what I wanted, but it serves to illustrate well.
My example object and JQuery function follows below:
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>
Intheaboveexample,thedatawillbechangedwithafunction,whichwillcreatethetable,toadddata,wouldalreadybeadifferentprocess,sincewearetalkingaboutJQuery.
Anotherverysimplewaytodothisisthroughthe AngularJs framework. If you have heard of it, you should know its capacity, if not, keep that in mind.
With AngularJs, thanks to Data Biding, you are only concerned with data manipulation, the Model, and the Controller will take responsibility for interacting with the Model and the View. This system is MVC.
There is an example below of creating a table from an object. In which you can add new items to the HTML table, just by adding them to the object, without any direct contact with the HTML. As the data is changing, the view will also change automatically. Do not worry about the attributes of the framework, mind the main idea of dynamicity.
Follow the code in 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><divng-appng-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>