1

Olá pessoal eu tenho uma função que edita a tabela dinamicamente, mas os dados contidos nela possui formatação vinda do banco, mas quando dou duplo click ela não permanece com a mascara. a tabela vindo do banco é esta inserir a descrição da imagem aqui

Consigo editar a informação e ao dar enter ela salva a informação e vai para a linha de baixo para editar a próxima informação, mas salva sem formatação, queria formatar apenas o campo valor e campo data, já tentei com .mask() e com .unmask mas não funcionou

olha o exemplo abaixo dela funcionando

$(document).ready(function () {
    $('#tblEditavel tbody tr').each(function (i) {
        $(this).children('td').each(function (p) {
           
            $(this).dblclick(function () {
                if ($('td > input').length > 0) {
                    return;
                }
                
                var conteudoOriginal = $(this).text();
                var novoElemento = $('<input/>', {type: 'text', value: conteudoOriginal});
                $(this).html(novoElemento.bind('blur keydown', function (e) {
                    var keyCode = e.which;
                    var conteudoNovo = $(this).val();
                    if (keyCode == 13 && conteudoNovo != '' && conteudoNovo != conteudoOriginal) {
                        var objeto = $(this);
                        $.ajax({
                            type: "POST",
                            url: "alterar.php",
                            data: {
                                id: $(this).parents('tr').children().first().text(),
                                campo: $(this).parent().attr('title'),
                                valor: conteudoNovo
                            },
                            success: function (result) {
                                objeto.parent().html(conteudoNovo);
                                $('body').append(result);
                            }
                        })
                        var posicao = p + 1;
                        $(this).parent()
                                .html(conteudoNovo)
                                .parents('tr')
                                .next()
                                .children('td:nth-child(' + posicao + ')')
                                .trigger('dblclick');

                    } else if (keyCode == 27 || e.type == 'blur')
                        $(this).parent().html(conteudoOriginal);

                }));
                $(this).children().select();
            });
        });
    });
})
table{
                border-collapse: collapse;
            }
            table, td, th{
                border: 1px solid black;
                padding: 5px;
                
            }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table id="tblEditavel">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Nome</th>
                    <th>Valor Parcela</th>
                    <th>Vencimento</th>
                    <th>Parcela</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>74</td>
                    <td title="Nome" class="editavel">Fatura 45 Fornecedor B</td>
                    <td title="valor" class="editavel vlr">2.350,00</td>
                    <td title="vencimento" class="editavel dt">10/02/2017</td>
                    <td>1 / 3</td>
                </tr>
                <tr>
                    <td>75</td>
                    <td title="Nome" class="editavel">Fatura 45 Fornecedor B</td>
                    <td title="valor" class="editavel vlr">2.350,00</td>
                    <td title="vencimento" class="editavel dt">10/03/2017</td>
                    <td>2 / 3</td>
                </tr>
                <tr>
                    <td>76</td>
                    <td title="Nome" class="editavel">Fatura 45 Fornecedor B</td>
                    <td title="valor" class="editavel vlr">2.350,00</td>
                    <td title="vencimento" class="editavel dt">10/04/2017</td>
                    <td>3 / 3</td>
                </tr>
            </tbody>
        </table>

1 Resposta 1

2

Utilize jquery-maskmoney e jquery-mask e faça uma pergunta antes de adicionar o elemento pelo atributo title que foi clicado:

Exemplo

$(document).ready(function() {
  $('#tblEditavel tbody tr').each(function(i) {
    $(this).children('td').each(function(p) {

      $(this).dblclick(function() {
        if ($('td > input').length > 0) {
          return;
        }
        var conteudoOriginal = $(this).text();
        var novoElemento = $('<input/>', {
          type: 'text',
          value: conteudoOriginal
        });
        if ($(this).attr('title')=='valor')
        { 
           $(novoElemento)
              .maskMoney({decimal:',',thousands:'.'});
        }
        if ($(this).attr('title')=='vencimento')
        { 
           $(novoElemento)
              .mask("99/99/9999");
        }
        $(this).html(novoElemento.bind('blur keydown', function(e) {
          var keyCode = e.which;
          var conteudoNovo = $(this).val();
          if (keyCode == 13 && conteudoNovo != '' && conteudoNovo != conteudoOriginal) {
            var objeto = $(this);
            $.ajax({
              type: "POST",
              url: "alterar.php",
              data: {
                id: $(this).parents('tr').children().first().text(),
                campo: $(this).parent().attr('title'),
                valor: conteudoNovo
              },
              success: function(result) {
                objeto.parent().html(conteudoNovo);
                $('body').append(result);
              }
            })
            var posicao = p + 1;
            $(this).parent()
              .html(conteudoNovo)
              .parents('tr')
              .next()
              .children('td:nth-child(' + posicao + ')')
              .trigger('dblclick');

          } else if (keyCode == 27 || e.type == 'blur')
            $(this).parent().html(conteudoOriginal);

        }));
        $(this).children().select();
      });
    });
  });
})
table {
  border-collapse: collapse;
}
table,
td,
th {
  border: 1px solid black;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>

<table id="tblEditavel">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Nome</th>
                    <th>Valor Parcela</th>
                    <th>Vencimento</th>
                    <th>Parcela</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>74</td>
                    <td title="Nome" class="editavel">Fatura 45 Fornecedor B</td>
                    <td title="valor" class="editavel vlr">2.350,00</td>
                    <td title="vencimento" class="editavel dt">10/02/2017</td>
                    <td>1 / 3</td>
                </tr>
                <tr>
                    <td>75</td>
                    <td title="Nome" class="editavel">Fatura 45 Fornecedor B</td>
                    <td title="valor" class="editavel vlr">2.350,00</td>
                    <td title="vencimento" class="editavel dt">10/03/2017</td>
                    <td>2 / 3</td>
                </tr>
                <tr>
                    <td>76</td>
                    <td title="Nome" class="editavel">Fatura 45 Fornecedor B</td>
                    <td title="valor" class="editavel vlr">2.350,00</td>
                    <td title="vencimento" class="editavel dt">10/04/2017</td>
                    <td>3 / 3</td>
                </tr>
            </tbody>
        </table>

2
  • 1
    perfeito era exatamente o que eu estava precisando, outra coisa que agora começou e me pegar a veia foi o fato de que todas as colunas da tabela estão abrindo para edição, antes eu estava usando #tblEditabel tr tr.editavel edita somente as colunas da classe .editavel, mas como precisei interagir para usar a função enter não consegui mais fazer funcionar, tem alguma ideia? mas o que você fez foi espetacular já esta a um dia tentando.
    – WMomesso
    Commented 3/02/2017 às 16:05
  • Não entendi bem a nova duvida quem sabe uma nova pergunta relacionando com essa. @WagnerFernandoMomesso
    – novic
    Commented 3/02/2017 às 16:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .