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上的可編輯表？

回答

相關問題