How to insert 2 inputs in the same TD with doubleclick?

Question

How to insert 2 inputs in the same TD with doubleclick?

Navigation

#1 by (2 votes)

6

I would like to insert 2 inputs into a td, today my code works with only one input, and even saves the information in the database, but I need to include one more input to enter a password to authorize the update. Today it looks like this:

A% w / w% Maturity

A%of%Value

Whenyouactuallywantedittolooklikethis,bothforthedateandthevalue.

Thecodeexamplefollows.

$(document).ready(function() {
  $('#tabelaEditavel tbody tr').each(function(i) {
    $(this).children('td').each(function(p) {
      if (($(this).attr('title') === 'Valor') || $(this).attr('title') === 'Vencimento') {
        $(this).dblclick(function() {
          if ($('td > input').length > 0) {
            return;
          }
          var conteudoOriginal = $(this).text();
          var novoElemento = $('<input/>', {
            type: 'text',
            value: conteudoOriginal
          });
          //tentei adicionar o input abaixo mas não funcionou
          var passWord = $('<input/>', {
            type: 'text',
            value: '1234'
          });
          if ($(this).attr('title') === 'Valor') {
            $(novoElemento)
              .maskMoney({
                prefix: 'R$ ',
                allowNegative: true,
                thousands: '',
                decimal: ',',
                affixesStay: true
              });
          }
          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 || keyCode == 9 || keyCode == 0 && conteudoNovo != '' && conteudoNovo != conteudoOriginal) {
              var objeto = $(this);
              $.ajax({
                type: "POST",
                url: "#",
                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');
            } else if (keyCode == 27 || e.type == 'blur')
              $(this).parent().html(conteudoOriginal);
          }));
          $(this).children().select();
        });
      };
    });
  });
});

* {
  font-family: Consolas
}

.tabelaEditavel {
  border: solid 1px;
  width: 100%
}

.tabelaEditavel td {
  border: solid 1px;
}

.tabelaEditavel .celulaEmEdicao {
  padding: 0;
}

.tabelaEditavel .celulaEmEdicao input[type=text] {
  width: 100%;
  border: 0;
  background-color: rgb(255, 253, 210);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script><!DOCTYPEhtml><tableid="tabelaEditavel" class="tabelaEditavel">
  <thead>
    <tr>
      <th>Código</th>
      <th>Vencimento</th>
      <th>Valor</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr id="1">
      <td>001</td>
      <td title="Vencimento">14/06/2018</td>
      <td title="Valor">R$ 189,52</td>
      <td><button>A pagar</button></td>
    </tr>
    <tr id="2">
      <td>002</td>
      <td title="Vencimento">18/06/2018</td>
      <td title="Valor">R$ 7859,25</td>
      <td><button>A pagar</button></td>
    </tr>
    <tr id="3">
      <td>003</td>
      <td title="Vencimento">21/06/2018</td>
      <td title="Valor">R$ 78,59</td>
      <td><button>A pagar</button></td>
    </tr>
  </tbody>
</table>

javascript jquery

asked by anonymous 14.06.2018 / 13:53

1 answer

Send SMS via Php How to set up languages in Asp.net Core

score 2 · Accepted Answer

Mom, how are you? Send Tortato a hug for me! I worked at BNE a few years ago! I even did Chemical Engineering with him, do you? We went into the facul together:)

The code is fine, but I think it failed to anchor the two <input> s within <td> , like this:

$(document).ready(function() {
  $('#tabelaEditavel tbody tr').each(function(i) {
    $(this).children('td').each(function(p) {
      // Salvo o conteúdo original para uso futuro.
      if (!$(this).data('conteudoOriginal')) {
          $(this).data('conteudoOriginal', $(this).text());
      }
      var conteudoOriginal = $(this).data('conteudoOriginal');
      var titulo = $(this).attr('title');
      var id = $(this).siblings().first().text();

      if (/^(Valor|Vencimento)$/.test(titulo)) {
        //$(this).dblclick(function() {
        $(this).on('dblclick', function () {
          //if ($('td > input').length > 0) {
          //  return;
          //}
          //var conteudoOriginal = $(this).text();
          
          // Adiciono a classe CSS no TD.
          $(this).addClass('celulaEmEdicao');

          var novoElemento = $('<input/>', { 
            type: 'text', 
            name: titulo + id + '_' + i + '_' + p,
            value: conteudoOriginal
          });
          var passWord = $('<input/>', {
            type: 'password',
            name: 'passWord' + id + '_' + i + '_' + p,
            value: '1234'
          });
          // Abaixo, ancoro os dois novos elementos no TD e apago o texto,
          $(this).html('');
          $(this).append(novoElemento);
          $(this).append(passWord);

          var metodo = titulo === 'Valor' ? 'maskMoney' : 'mask';
          var argumentos = titulo === 'Valor' ?
            [{
                prefix: 'R$ ',
                allowNegative: true,
                thousands: '',
                decimal: ',',
                affixesStay: true
              }] : ['99/99/9999'];

          //if (titulo === 'Valor') {
            ////$(novoElemento)
            //novoElemento
            //  .maskMoney({
            //    prefix: 'R$ ',
            //    allowNegative: true,
            //    thousands: '',
            //    decimal: ',',
            //    affixesStay: true
            //  });
          //}
          //if (titulo === 'Vencimento') {
            ////$(novoElemento)
            //novoElemento
            //  .mask("99/99/9999");
          //}

          // Aplica a máscara de entrada no novoElemento.
          novoElemento[metodo].apply(novoElemento, argumentos);

          // Seleciona o texto dentro de novoElemento.
          novoElemento.select();

          // Liga o manipulador de eventos blur e keydown ao novoElemento.
          var td = $(this);
          var senhaEsperada;
          var conteudoNovo;
          novoElemento.on('blur keydown', function(e) {
            var keyCode = e.which;
            conteudoNovo = $(this).val();
            if ((keyCode == 13 || keyCode == 9 || keyCode == 0) &&
              conteudoNovo != '' && 
              conteudoNovo != conteudoOriginal) {
              //var objeto = $(this);
              $.ajax({
                type: "POST",
                url: "#",
                data: {
                  id: id,
                  campo: titulo,
                  valor: conteudoNovo
                },
                success: function (result) {
                  // Aqui você vai ter que mudar de acordo, porque
                  // eu não sei a regra de negócio e o back end é o SO, 
                  // não o servidor real, então tá me impedindo de digitar
                  // a senha.
                  // Desconverto a senha de Base64 para UTF-8.
                  senhaEsperada = btoa(result.senha);
                  novoElemento.val(result.valor);
                  passWord.select();
                }
              });
              //var posicao = p + 1;
              //$(this).parent()
              //  .html(conteudoNovo)
              //  .parents('tr');
            } else if (keyCode == 27 || e.type == 'blur') {
              // Aqui também tem que trocar de acordo
              // com a regra de negócio porque tá me impedindo
              // de digitar a senha!
              desfazEdicao(conteudoOriginal, 'lightgray');
            }
          });

          // Aplico o manipulador de evento keydown à passWord.
          passWord.on('blur keydown', function (e) {
             var keyCode = e.which;
             var senhaDigitada = $(this).val();
             var conteudoElemento = conteudoOriginal;
             var cor = 'lightgray';
             // Aqui tem que trocar de acordo com a regra de negócio,
             // porque provavelmente você vai querer fazer algo 
             // com a senha.
             if (keyCode == 27) {
                // Conteudo original.
             } else if (keyCode == 13 || keyCode == 9 || keyCode == 0) {
               if (senhaDigitada === senhaEsperada) {
                 // Salva as alteracoes.
                 td.data('conteudoOriginal', conteudoNovo);
                 conteudoOriginal = conteudoNovo;
                 conteudoElemento = conteudoNovo;
                 cor = 'lightgreen';
               } else {
                 alert('Senha incorreta');
                 passWord.val('');
                 return false;
               }
             }
             desfazEdicao(conteudoElemento, cor);
          });

          function desfazEdicao(conteudo, cor) {
            novoElemento.remove();
            passWord.remove();
            var span = $('<span>' + conteudo + '</span>');
            td.prepend(span)
              .animate({'background-color': cor }, 500)
              .animate({'background-color': 'white'}, 100)
              .removeClass('celulaEmEdicao');
          }
        });
      };
    });
  });
});

* {
  font-family: Consolas
}

.tabelaEditavel {
  border: solid 1px;
  width: 100%
}

.tabelaEditavel td {
  border: solid 1px;
}

.tabelaEditavel .celulaEmEdicao {
  padding: 0;
}

.tabelaEditavel .celulaEmEdicao input[type=text],
.tabelaEditavel .celulaEmEdicao input[type=password] {
  width: 100%;
  border: 0;
  background-color: rgb(255, 253, 210);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script><scriptsrc="https://code.jquery.com/color/jquery.color.plus-names-2.1.2.min.js"></script>
<!DOCTYPE html>

<table id="tabelaEditavel" class="tabelaEditavel">
  <thead>
    <tr>
      <th>Código</th>
      <th>Vencimento</th>
      <th>Valor</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr id="1">
      <td>001</td>
      <td title="Vencimento">14/06/2018</td>
      <td title="Valor">R$ 189,52</td>
      <td><button>A pagar</button></td>
    </tr>
    <tr id="2">
      <td>002</td>
      <td title="Vencimento">18/06/2018</td>
      <td title="Valor">R$ 7859,25</td>
      <td><button>A pagar</button></td>
    </tr>
    <tr id="3">
      <td>003</td>
      <td title="Vencimento">21/06/2018</td>
      <td title="Valor">R$ 78,59</td>
      <td><button>A pagar</button></td>
    </tr>
  </tbody>
</table>