Select TD javascript

0

I'm developing a routine with a pivot table using javascript, where when I open the routine a button 'ADD TABLE' appears

Whentheuserclicks'ADDTABLE'thetableheaderappearsandan'ADD'buttonthatisresponsibleforaddingrowstothetable.

Theproblemisthis:Iwouldliketoperformaselectinthedatabase'SQLSERVER'usingjavascript+php.Whentypingtheordernumberintherequestedcolumntheothercolumnsareautomaticallycompletedwiththedataoftheorderentered.

EX01:Ientertheordernumber

Whenenteringtheordernumberandgivinga'TAB',thesystemgivesaselectinthedatabasebringingthecolumndata:'DATEISSUE','FINANCIALRELEASE','FACTORYDAYS','CUSTOMER','UF','VALUE','VOLUME','WEIGHT'fortherequestedorder.

Followthecode:

$("#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();

    });
    
asked by anonymous 13.11.2018 / 13:06

1 answer

1

Well, come on:

Let's go by parts ...

  

When you enter the order number and give a 'TAB'

At this point you can use the onBlur event after creating your function.

  

The system gives a select in the database bringing the data of the columns: 'DATA ISSUE', 'FINANCIAL RELEASE', 'DAYS IN THE FACTORY', 'CLIENT', 'UF', 'VALUE', 'VOLUME', 'WEIGHT' for the order you entered.

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

I'll give you an example:

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

js function:

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

This way you can fill in the data in the row by taking the parent element of your referenced element.

To make the call, at the time you create your row, you simply add the onblur function to your input, eg

$(".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 numbido class:

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

The process is the same, however with this form you do not need to change anything in your code.

You can also create an ID at the time of mounting the table and calling a function referencing the id of the row ... anyway, there are many ways to do what you need.

I could post the whole code, but that would be the purpose of the community.

I hope to have helped and any questions are available.

    
13.11.2018 / 13:47