Serialize form does not take the table

Question

I have this function to check if something has changed in formulário, apparently it worked perfectly:

    $(function () {
    var init_form = $('#editarproduto').serialize();
    $(':submit').click(function () { window.onbeforeunload = null; }); window.onbeforeunload = function () { var check_form = $('#editarproduto').serialize(); console.log(check_form); console.log(init_form); if (check_form === init_form) return null; return 'Os dados do formulário não foram salvos, deseja permanecer nesta página?'; };
});

But the need arose for it checks the table, if something was hidden in it, it does not catch the changes in this table:

<table class="table table-responsive table-hover" id="tabelaf" name="tabelaf">
                            <tbody>
                                @foreach (var item in Model.ProdutosFornecedores)
                                {
                                <tr class="tr item">
                                    <td>@item.FornecedorProduto.Id</td>
                                    <td>@item.FornecedorProduto.Nome</td>
                                    <td align="right">
                                        <a class="link-excluir" href="#" data-id="@item.Id" title="Excluir"><i class="fa fa-trash-o fa-lg"></i></a>&nbsp;
                                    </td>
                                </tr>
                                }
                            </tbody>
                        </table>

How to make him compare this table also ?

Answer 1

The Jquery serialize method only serializes values of elements with name (and that are not disabled), if you want to compare table data using serialize, you must give a name to all elements, and also a value (which will probably be the same as the internal HTML).

Example:

<td name="id[]" value="@item.FornecedorProduto.Id">@item.FornecedorProduto.Id</td>
<td name="nome[]" value="@item.FornecedorProduto.Nome">@item.FornecedorProduto.Nome</td>

Edit: FIX Jquery only serializes element values of input, textarea or select type, so even with a name the values of td will not be serialized. In this case an input of type Hidden with the same values as td would be required.