How to send data from a dynamic HTML table via json

Question

I need to do something similar to the code below:

Here I create the htmla table dynamically:

$('#btnIncluirContato').on('click', function () {

    $('#tblContato tbody').append('<tr id=' + $('#ContatoID').val() + '>' +
    '<td class="NomeContato" id="NomeContato">' + $('#NomeContato').val() + '</td>' +
    '<td class="TelefoneContato" id="TelefoneContato">' + $('#TelefoneContato').val() + '</td>' +
     '<td class="remover" id="remover">' + '<a href="#"><img src="/Content/Images/excluirFlatRed.png" class="remover" /></a>' + '</td>' +
    '</tr>');

});

Here sending to the database via ajax:

 $("#btnFinalizar").click(function () {

    //Percorrer a tabela 
    var table = $('#tblContato');
    table.find('tr').each(function (indice) {

        $(this).find('td').each(function (indice) {

        });

    });

    //Setar campos inputs da Tela
    var _TBCliente = {
        'ID': $('#campoID').val(),
        'Nome': $('#campoNome').val(),
        'Idade': $('#campoIdade').val(),
        'TBContato':[]
    };

    //Adicionar os itens da Tabela de Contato
    _TBCliente.TBContato.push({

    });

    //Com o objeto populado eu vou enviar para o banco via $.ajax
});

The main question is how to take the data from the HTML table and popular the object that will be sent to a Jsonresult method ?

Answer 1

you can try like this:

var dados  =  [];
var i     =  0;
var table = $('#tblContato');
table.find('tr').each(function () {
   dados[i]['id']  =  $( this ).find( 'td:nth-child(1)' ).text();
   dados[i]['nome']  =  $( this ).find( 'td:nth-child(2)' ).text();
   dados[i]['idade']  =  $( this ).find( 'td:nth-child(3)' ).text();
   dados[i]['contato']  =  $( this ).find( 'td:nth-child(4)' ).text();
   i++;
});

$.ajax({
   type: "POST",
   data: {meusDados:dados},
   url: "http://seusite.com.br/processarPost",
   success: function( data ){
       alert( 'Enviou' )
   },
   error: function (request, status, error) {
      alert(request.responseText);
   }
});

Switch the Nth-Child pseudo-class to your case.

I hope it helps.