Editierbare Tabelle auf JQuery und HTML?

Ich versuche, für die Bearbeitung der Daten ohne Refresh eine Pivot-Tabelle zu machen, aber wenn nun mal die Linie nichts Doppelklick auf, folgt dem Code JQueryEditierbare Tabelle auf JQuery und HTML?

$(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:"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(); 
    }  
})})

Code der einfachen Tabelle HTML

<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> 

     </tbody> 
    </table> 

</body>

Bevor der Code funktionierte, aber nach dem Setzen des Ajax funktioniert es nicht mit Doppelklick, was habe ich falsch gemacht?

Quelle

2017-02-01 WMomesso

"Es funktioniert nicht" nicht wirklich das Problem beschreiben. Wenn Sie dies debuggen, wo/wie genau schlägt es fehl? Gibt es einen Fehler in der Browserkonsole? Wenn Sie den Code im Debugger des Browsers durchgehen, macht er das, was Sie erwarten? Wird die AJAX-Anfrage gestellt? Wie lautet die Antwort des Servers? Wo versagt es? – David

@David Eigentlich Doppelklick darauf bearbeitet nicht die Tabelle, die Eingabe funktioniert nicht, ich weiß nicht, wo ich den jquery Code, wie es nicht bearbeitet, es verarbeitet nicht den Ajax-Code. – WMomesso

Sie eine , vor succes in AJAX fehlt und Sie haben eine zusätzliche Schließung } nach $(this).children().select();. Siehe den Arbeits Schnipsel:

$(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: "alterar.php", 
 
      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">Fatura 45 Jhovini</td> 
 
     <td title="valor" class="editavel">2.350,00</td> 
 
     <td title="vencimento" class="editavel">10/02/2017</td> 
 
    </tr> 
 

 
    </tbody> 
 
</table>

Quelle

2017-02-01 13:11:58 Ionut

Wo war der Fehler? Ich habe viel Zeit damit verbracht, es zu versuchen. ich danke dir sehr. – WMomesso

@WagnerFernandoMomesso, Gern geschehen. Freue mich zu helfen. Wie ich auch in meiner Antwort angegeben habe, haben Sie ein '' '' zwischen 'data' und' success' aus 'AJAX' verpasst und Sie hatten ein extra closing'} 'welches ich entfernt habe. Ich habe auch meine Antwort mit Kommentaren für jede Änderung bearbeitet, die ich gemacht habe. – Ionut

Editierbare Tabelle auf JQuery und HTML?

Antwort

Verwandte Themen