Automatically set date and time in HTML table

Question

How do I automatically set a date and time in my html table? Doing it by js.

I created a table by js and entered in it data from my API, only that this data goes to the TD part of the table, and I need to put the date and time that this was entered, and I have to put in the TH part of the table.

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

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

Then this part of th has to automatically go to date and time. td then I put by 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;
}

Then I pulled the 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");
     }

  });

And I made a variable to add the time and date:

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;

But I don’t know how to put this in my html table

Answer 1

I made an example using your way of creating the date and the HTML that you shared.

I created a function that searches the first column of the first table with the class table and concatenates the date.

I suggest you change the form of identification to ID if it is a single table.

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>