doubt sore or each JQUERY

Question

I’m breaking my head and I can’t find the problem have a table that is created dynamically when I scan it shows the 0 position as null and after that starts to appear normal

html screen

row creation in table

    var id = 1;


function criar_linhaGrid() {

    var dados = {
        Codigo: $("#txt_codigo").val(),
        Descricao: $("#txt_descricao").val()

    };

    // verificar se o códigoInterno da conversao foi digitado
    if (dados.Codigo != "") {


        $("#grid_cadastro > tbody").append(
         "<tr class = 'dadosConversao'>" +
        "    <td class='id'>" + dados.id + "</td>" +
        "    <td class='codigo'>" + dados.Codigo + "</td>" +
        "    <td class='descricao'>" + dados.Descricao + "</td>" +
        "    <td <a class='btn btn-danger btn-xs btn-Excluir' role='button'><i class='glyphicon glyphicon-trash'></i>  Excluir</a>" + "</td>" +
        "</tr>"
        )

        $("#modal_incluir").parents('.bootbox').modal('hide');

        $("#txt_codigo").val("");
        $("#txt_descricao").val("");

       id = id + 1;

    } 

};

HTML

                                        <div id="cabecalho_grid" class="row">
                                        <div class="col-md-12">
                                            <table id="grid_cadastro" class="table table-bordered table-striped table-hover">
                                                <thead>
                                                    <tr>
                                                        <th>ID</th>
                                                        <th>Código</th>
                                                        <th>Descrição</th>
                                                        <th>Ação</th>
                                                    </tr>
                                                </thead>
                                              <tbody>

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>


                                </div>
                            </div>

JQUERY to go through ajax lists in my view

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


    var arrayConversao = $('.id');
    var listaConversao = new Array();
    $('#grid_cadastro tr').each(function (index) {

        listaConversao.push({
                   IDConversao: index,
                    Codigo: $(this).find('.codigo').text(),
                    Descricao: $(this).find('.descricao').text()

                });

                return listaConversao;
    });


});

on my controller

        [HttpPost]
      public ActionResult SalvarProdutos(DTO.Produtos todas_listas)
    {


        // Falta Incrementar
        return View();


    }

controller image inserted 2 records by modal

Answer 1

That’s because your dial each is taking all the trs, including the first which is only the table header, where it does not contain the classes you capture, so the index result 0 shall be void or Undefined.

To avoid the first row of the table, use the method .not(":first") that the first row of the table will be ignored:

$('#grid_cadastro tr').not(":first").each(function (index) {...