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>');

} });

Estou com esse codigo em javascript gerando HTML e gostaria de saber como faço para criar uma tabela que receba os dados e exiba. Existe tres códigos semelhantes a esse que recebem NomeEmpresa, NomeCIdade, NomeLinha e o ultimo receberia os horários, estou ainda aprendendo HTML, Javascript e PHP, então queria saber como faço para substituir esse (options) e criar a tabela no lugar dele. E tambem se tem como a tabela ser dinâmica, aumentado o tamanho de acordo com os dados recebidos.

2
  • Então, esse e um pedaço do código em javascript que pegas os dados de um select e coloca dentro de um <option>, os outro códigos utilizam um select em HTML para o usuário escolher um opcao, só que esse ultimo só ira exibir o resultado. Ai onde esta a questão, eu queria colocar uma tabela onde esta o <option> mais não sei como. 10/01/2016 às 2:53
  • Isso mesmo, o usuário escolhe uma empresa, essa empresa tem varias cidades cadastradas, o usuário escolhe uma cidade que tem varias linhas de ônibus cadastradas, o usuário seleciona uma linha, ai é onde entra a tabela para mostrar os horários para a linha selecionada. 10/01/2016 às 3:09

1 Resposta 1

2

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .