JQuery和HTML上的可编辑表？

我试图做一个数据透视表编辑数据不刷新，但是当双击行没有任何反应，遵循jQuery代码的简单表格的HTMLJQuery和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(); 
    }  
})})

代码

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

在代码工作之前，但在放置ajax后无法双击工作，我做错了什么？

来源

2017-02-01 WMomesso

“它不工作”并不能真正说明问题。当你调试这个时，它在哪里/具体是否失败？浏览器控制台是否有错误？当你浏览器的调试器中的代码时，它是否符合你的期望？是否提出了AJAX请求？服务器的回应是什么？它在哪里失败？ – David

@David实际上双击它不会编辑表，输入不工作，我不知道我在哪里得到的jQuery代码，它如何不编辑，它不处理ajax代码。 – WMomesso

你错过了在AJAXsucces前,，你有一个额外的收盘}$(this).children().select();后。见工作片段：

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

来源

2017-02-01 13:11:58 Ionut

错误在哪里？我浪费了很多时间尝试。非常感谢。 – WMomesso

@WagnerFernandoMomesso，不客气。乐于帮助。正如我在我的回答中指出的那样，你错过了''，'''''数据'和'成功'之间的'AJAX'函数，并且你有一个额外的关闭'}'我已经删除了。我也编辑了我的答案，并对每一个修改都做了评论。 – Ionut

JQuery和HTML上的可编辑表？

回答

相关问题