Editable table with jquery and php?

Asked

Viewed 1,067 times

3

I’m trying to make a dynamic table for editing the data without refresh, but when double-clicking on the line nothing happens, follow the code Jquery


$(document).ready(function(){
    $('#tblEditavel tbody tr td.editavel').dblclick(function(){
        if($('td > input').length > 0){
            return;
        }
        var conteudoOriginal = $(this).text();
        var novoElemento = $('', {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);
                    }
                })
            }
            else if( keyCode == 27 || e.type == 'blur')
                $(this).parent().html(conteudoOriginal);
        }));
        $(this).children().select();
    }

})
})

Just below the html code

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="atualiza.js"></script>
    <style>
        table{
            border-collapse: collapse;
        }
        table, td, th{
            border: 1px solid black;
            padding: 5px;

        }
    </style>
</head>
<body>
    <table id="tblEditavel">
        <thead>
            <tr>
                <th>Id</th>
                <th>Nome</th>
                <th>Valor</th>
                <th>Vencimento</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>74</td>
                <td title="Nome" class="editavel">Fatura 45 Jhovini</td>
                <td title="valor" class="editavel">2.350,00</td>
                <td title="vencimento" class="editavel">10/02/2017</td>
            </tr>
            <tr>
                <td>75</td>
                <td title="Nome" class="editavel">Fatura 45 Jhovini</td>
                <td title="valor" class="editavel">2.350,00</td>
                <td title="vencimento" class="editavel">10/03/2017</td>
            </tr>
            <tr>
                <td>76</td>
                <td title="Nome" class="editavel">Fatura 45 Jhovini</td>
                <td title="valor" class="editavel">2.350,00</td>
                <td title="vencimento" class="editavel">10/04/2017</td>
            </tr>
            <tr>
                <td>77</td>
                <td title="Nome" class="editavel">Fatura 45 Jhovini</td>
                <td title="valor" class="editavel">2.350,00</td>
                <td title="vencimento" class="editavel">10/05/2017</td>
            </tr>
            <tr>
                <td>78</td>
                <td title="Nome" class="editavel">Fatura 45 Jhovini</td>
                <td title="valor" class="editavel">2.350,00</td>
                <td title="vencimento" class="editavel">10/06/2017</td>
            </tr>
        </tbody>
    </table>

</body>

php just sends it to the server, where I’m missing, it was working before but after I inserted the ajax nothing works and I didn’t know how to get back to the previous file.

jquery html ajax

1 answer

3


I managed to solve with the help of SOUS @Ionut and decided to share in case someone needs in the future, there was an extra closure and a comma was missing before Success, I hope to have helped someone.

$(document).ready(function() {
  $('#tblEditavel tbody tr td.editavel').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: "#",
            data: {
              id: $(this).parents('tr').children().first().text(),
              campo: $(this).parent().attr('title'),
              valor: conteudoNovo
            }, //added this comma here
            success: function(result) {
              objeto.parent().html(conteudoNovo);
              $('body').append(result);
            }
          })
        } else if (keyCode == 27 || e.type == 'blur'){
          $(this).parent().html(conteudoOriginal);
          }
      }));
      $(this).children().select();
    
        //} removed the extra } from here.
    });

  })
table {
  border-collapse: collapse;
}
table,
td,
th {
  border: 1px solid black;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblEditavel">
  <thead>
    <tr>
      <th>Id</th>
      <th>Nome</th>
      <th>Valor</th>
      <th>Vencimento</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>74</td>
      <td title="Nome" class="editavel">Conta de Telefone</td>
      <td title="valor" class="editavel">2.350,00</td>
      <td title="vencimento" class="editavel">10/02/2017</td>
    </tr>
    <tr>
      <td>74</td>
      <td title="Nome" class="editavel">Conta de água</td>
      <td title="valor" class="editavel">235,00</td>
      <td title="vencimento" class="editavel">18/02/2017</td>
    </tr>

  </tbody>
</table>

Browser other questions tagged jquery html ajax

You are not signed in. Login or sign up in order to post.