Select <TD> javascript

Question

I am developing a routine with a dynamic table using javascript, where when opening the routine appears a button 'ADD TABLE'

When the user clicks on 'ADD TABLE' the table header appears and an 'ADD' button that is responsible for adding rows to the table.

The problem is this: I would like to perform a select in the 'SQL SERVER' database using javascript + php. Where when entering the order number in the requested column the other columns are automatically completed with the order data entered.

EX01: I type the order number

When entering the order number and giving a 'TAB', the system gives a select in the database bringing the data of the columns: 'DATE ISSUED', 'FINANCIAL RELEASE', 'DAYS IN THE FACTORY', 'CUSTOMER', 'UF', 'VALUE', 'VOLUME', 'WEIGHT' referring to the order typed.

Follows the code:

 $("#multiuso").append(newRow);
   var liveTableData = $('table').tableExport({formats: ["xlsx","xls", "csv", "txt"],    });
   liveTableData.reset();
  //  função para adicionar linhas na tabela especifica, .addRows+n+ = id criado dinamicamente para que ao clicar no botão o sistema inclua a linha na tabela do is especifico
  $(".addRows"+n+"").on('click',function(){
      //alert(n);
      //Variável que recebe a linha que será adicionada na tabela.
    var newRowContent = '<tr>';
        newRowContent +=  '<td>'+n+' ENTREGA</td>';
        newRowContent +=  '<td contenteditable="true" class="numPedido" id = "numPedido" name ="numPedido[1]" ></td>';
        newRowContent +=  '<td class="dtEmissao" id = "dtEmissao" name ="dtEmissao[2]" ></td>';
        newRowContent +=  '<td class="dtLibFin" id = "dtLibFin" name ="dtLibFin[3]" ></td>';
        newRowContent +=  '<td class="diaFabrica" id = "diaFabrica" name ="diaFabrica[4]"></td>';
        newRowContent +=  '<td class="cliente" id = "cliente" name ="cliente[5]"></td>';
        newRowContent +=  '<td class="uf" id = "uf" name ="uf[6]"></td>';
        newRowContent +=  '<td class="valor" id = "valor" name ="valor[7]"></td>';
        newRowContent +=  '<td class="volume" id = "volume" name ="volume[8]"></td>';
        newRowContent +=  '<td class="peso" id = "peso" name ="peso[9]"></td>';
        newRowContent += '<td class="actions">';
        newRowContent += '<button class="btn btn-large btn-danger removebutton"  type="button">Remover</button> </tr>';
        newRowContent += '</tr>';
       $(newRowContent).appendTo($("#tab"+n+" > tbody"));
       liveTableData.reset();

    });

Answer 1

Well, come on:

let’s go in pieces...

When entering the order number and giving a 'TAB'

for this point you can use the event onBlur, after creating its function.

the system gives a select in the database bringing the data of the columns: 'DATE ISSUED', 'FINANCIAL RELEASE', 'DAYS AT THE FACTORY', 'CUSTOMER', 'UF', 'VALUE', 'VOLUME', 'WEIGHT' referring to the order typed.

For this you can make a request via ajax (an example here ), so you can recover the values from the database.

Let me give you an example:

You can create this by referencing the DOM object directly in the function call:

function js:

function recupera_valores(val){
    console.log(val);
    //aqui você coloca seu código da requisição ajax
}

This way you can fill the data in the line by taking the Parent element of your referenced element.

to make the call, when creating your Row just add the onblur function in your input, example:

$(".addRows"+n+"").on('click',function(){
  //alert(n);
  //Variável que recebe a linha que será adicionada na tabela.
var newRowContent = '<tr>';
    newRowContent +=  '<td>'+n+' ENTREGA</td>';
    newRowContent +=  '<td contenteditable="true" class="numPedido" id = "numPedido" name ="numPedido[1]" onBlur="recupera_valores(this);"></td>';
    newRowContent +=  '<td class="dtEmissao" id = "dtEmissao" name ="dtEmissao[2]" ></td>';
    newRowContent +=  '<td class="dtLibFin" id = "dtLibFin" name ="dtLibFin[3]" ></td>';
    newRowContent +=  '<td class="diaFabrica" id = "diaFabrica" name ="diaFabrica[4]"></td>';
    newRowContent +=  '<td class="cliente" id = "cliente" name ="cliente[5]"></td>';
    newRowContent +=  '<td class="uf" id = "uf" name ="uf[6]"></td>';
    newRowContent +=  '<td class="valor" id = "valor" name ="valor[7]"></td>';
    newRowContent +=  '<td class="volume" id = "volume" name ="volume[8]"></td>';
    newRowContent +=  '<td class="peso" id = "peso" name ="peso[9]"></td>';
    newRowContent += '<td class="actions">';
    newRowContent += '<button class="btn btn-large btn-danger removebutton"  type="button">Remover</button> </tr>';
    newRowContent += '</tr>';
   $(newRowContent).appendTo($("#tab"+n+" > tbody"));
   liveTableData.reset();

});

or you can create a function for the class on request:

$('.numpedido').blur(function(){
     console.log(this);
    //aqui vai seu código
});

the process is the same, but with this form you do not need to modify anything in your code.

You can also create an ID when mounting the table and call a function referencing the id of the Row... Anyway, there are numerous ways to do what you need.

I could post the whole code, but then I’d get out of the community’s purpose.

I hope I’ve helped and any doubt I’m available.