How to create HTML table inside javascript

Question

How to create HTML table inside javascript

Navigation

#1 by (2 votes)

0

 for (var i = 0; i < t.length; i++) {
    options = options.concat('<option value="' + t[i].CodLinha + '">'+'--Saida Rodov Velha:'+ t[i].saida_Rodov_velha +'--Saida Rodov Nova:'+ t[i].saida_Rodov_Nova +'--Saida Interor:'+ t[i].saida_Interior +'--Numero Veiculo:'+ t[i].num_Veiculo + '</option>')                               
      }
        $('#NomeLinha').html(options).show();
        $('.carregando').hide();
   });
 } else {
        $('#NomeLinha').html('<option value=""> </option>');

} });

I have this javascript code generating HTML and would like to know how to create a table that receives the data and displays it. There are three similar codes that are given CompanyName, CompanyName, LineName and last would receive the schedules, I'm still learning HTML, Javascript and PHP, so I wanted to know how to replace this (options) and create the table instead. And you also have how the table is dynamic, increasing the size according to the data received.

php javascript html

asked by anonymous 10.01.2016 / 03:35

1 answer

jquery ui dialog does not expect confirmation Error ajax return when accent

score 2 · Accepted Answer

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>