0

Como consigo colocar uma data e hora automaticamente na minha table do html? Fazendo pelo js.

Eu criei uma table pelo js e inseri nele dados do meu API, só que esses dados vao para a parte TD da tabela, e eu preciso colocar a data e hora que isso foi inserido, e tenho que colocar na parte TH da table.

<tr class="cliente">
                      <th class="cor">Quantidade</th>

                </tr>
                <tr class="clientess">
                      <th class="cor">Nº.Pedido</th>
                </tr>

Aí nessa parte do th tem que ir automaticamente a data e hora. O td daí eu coloquei pelo javascript:

    function AdicionaNotaFiscal(fiscal) {

    var notaTr = fiscalTr(fiscal);
    var tabelas = document.querySelector(".fiscal");


    tabelas.appendChild(notaTr);

}

function fiscalTr(fiscal) {
    var notaTr = document.createElement("tr");
    notaTr.classList.add("fiscal");

      notaTr.appendChild(notaTd(fiscal.NFISCA, "info-nota-fiscal"));

    return notaTr;
}

function notaTd(dado, classe) {

    var teste = document.querySelector(".fiscal");

    var td = document.createElement("td");
    td.classList.add(classe);
    td.textContent = dado;

    return td;
}

Aí puxei o API:

function load() {

  var xhr = new XMLHttpRequest();

  xhr.open("GET", "api aqui");

  xhr.addEventListener("load", function() {
      var resposta = xhr.responseText;
      console.log("ola1");
      var clientes = JSON.parse(resposta);
      console.log("ola2");
      console.log(clientes);

      for (var i =0; i < 1; i++){
          console.log("ola3");
         var clientes_1 = clientes.TRACKER[i];
         adicionaClienteNaTabelaViagem(clientes_1);
         adicionaClienteNaTabelaViagemLogo(clientes_1);
         AdicionaNotaFiscal(clientes_1);
         AdicionaEntPrevista(clientes_1);
         AdicionaStatus(clientes_1);
        //  AdicionaNova();
        //  adicionaClientesNaTabelaViagemStatus(clientes_1);
         console.log("ola4");
     }

  });

E eu fiz uma variavel para adicionar a hora e a data:

var data = new Date();
    var dia     = data.getDate();
    var mes     = data.getMonth();
    var ano    = data.getFullYear();
    var hora    = data.getHours();
    var min     = data.getMinutes();
    var seg     = data.getSeconds();

    var str_data = dia + '/' + (mes+1) + '/' + ano;
    var str_hora = hora + ':' + min;

Mas nao sei como colocar isso na minha tabela do html

5
  • Pronto. Já atualizei a pergunta
    – Maria
    Commented 6/11/2017 às 15:57
  • não consigo mexer na resposta agora, por isso deletei, estou meio ocupado. Mas daqui a pouco alguém deve ajudar Commented 6/11/2017 às 15:59
  • <th class="cor">Quantidade</th> </tr> <tr class="clientess"> <th class="cor">Nº.Pedido</th> </tr> a parte que quero modificar é essa aí, aí ao invés de ta escrito "quantidade" etc, estaria o horario e data atual. Exemplo: google.com.br/…:
    – Maria
    Commented 6/11/2017 às 16:06
  • é que preciso colocar no th da table, mas a table tem classe sim. <table class="table" width="100px" align="center"> <thead> <tr class="cliente"> <th class="cor">Quantidade</th> </tr>
    – Maria
    Commented 6/11/2017 às 16:10
  • Fiz um exemplo de como você pode atribuir o valor da data a uma coluna, não sabia se era para criar uma nova coluna, também sugiro que utilize id ao invés de classe se a tabela for única. Sem mais informações minha resposta ficará limitada ao que postei. Commented 6/11/2017 às 16:26

1 Resposta 1

0

Fiz um exemplo utilizando sua forma de criar a data e o HTML que você compartilhou.

Criei uma função que busca a primeira coluna da primeira tabela com a classe table e concatena a data.

Sugiro que mude a forma de identificação para ID se for uma tabela única.

function addColunaData(data){
  var tabela   = document.getElementsByClassName("table")[0];
  //Pego a primeira coluna da primeira linha da tabela de classe table.
  var primeiraColuna = tabela.rows[0].cells[0];
  
  //concateno a data ao valor da primeira coluna.
  primeiraColuna.append(' ' + data);
  
}


//Abaixo sua forma de criar a data
var data = new Date();
var dia  = data.getDate();
var mes  = data.getMonth();
var ano  = data.getFullYear();
var hora = data.getHours();
var min  = data.getMinutes();
var seg  = data.getSeconds();
var str_data = dia + '/' + (mes+1) + '/' + ano;
var str_hora = hora + ':' + min;

//Concateno as variaves em uma única para realizar a atribuição
var data = str_data + ' ' + str_hora;

//Chamo a função para adicionar a data criada acima na coluna.
addColunaData(data);
<table class="table" width="100px" align="center"> 
  <thead> 
  <tr class="cliente"> 
    <th class="cor">Quantidade</th>
  </tr>
  <tr class="clientess">
    <th class="cor">Nº.Pedido</th>
  </tr>
  </thead>
</table>

1
  • 1
    Resolveu o meu problema. Muito obrigada!!!
    – Maria
    Commented 6/11/2017 às 16:35

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 .