動態JavaScript表格不能正常工作

我需要解決方案來提交表單，並收取費用並創建動態，通過ajax將信息發送到proceder.php。動態JavaScript表格不能正常工作

首先，您必須單擊botton「Nuevo Concepto」，然後您必須單擊現在添加的行中的「Editar」。於是，出現在窗體不能正常工作提交出現

<html> 
    <head> 
    <script type="text/javascript" src="jquery.min.js"></script> 
    <script> 
     $(document).ready(function() 
     { 
      $("#cargardatos").on('click', function() 
      { 
       var fragment = "<tr data-id='0'><td>Arandano</td><td>5</td><td>6</td><td>7</td><td><span class='editar' onclick='transformarEnEditable(this)'>Edit</span></td></tr>"; 
       $(".Tabla").append(fragment); 
      }); 

      $('#userinfo').submit(function() 
      { 
       var a = $(this).attr('action'); 
      }); 
     }); 

     function transformarEnEditable(nodo) 
     { 
      var nodoTd = nodo.parentNode; //Nodo TD 
      var nodoTr = nodoTd.parentNode; //Nodo TR 
      var dataid = $(nodoTr).attr("data-id"); 
      var nodosEnTr = nodoTr.getElementsByTagName('td'); 

      var concepto = nodosEnTr[0].textContent; 
      var precio = nodosEnTr[1].textContent; 
      var cantidad = nodosEnTr[2].textContent; 
      var total = nodosEnTr[3].textContent; 

      var nuevoCodigoHtml = "<form name='userinfo' id='userinfo' action='envio.php'><p>Nombre: <input type='text' name='nombre'/></p><p>Precio: <input type='text' name='precio'/></p><button type='button' class='btn btn-default' data-dismiss='modal'>Cerrar</button><input type='submit' class='btn btn-success' name='SubmitButton'></form>"; 
      nodoTr.innerHTML = nuevoCodigoHtml; 
     } 

     function submitForm() 
     { 
      document.theForm.submit(); 
     } 
    </script> 
    </head> 

    <body>  
    <table class="tabla"> 
     <thead> 
      <tr> 
       <th>Concepto</th> 
       <th>Precio</th> 
       <th>Cantidad</th> 
       <th>Total</th> 
       <th>Opciones<button id="cargardatos" class="btn btn-success">Nuevo Concepto</button></th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <form action="proceder.php" method="post" onreset="anular()"> 
       <td><input type="text" name="concepto" value="" size="10"></td> 
       <td><input type="text" name="precio" value="" size="5"</td> 
       <td><input type="text" name="cantidad" value="" size="5"</td> 
       <td><input type="text" name="total" value="" size="5"</td> 
       <td><input class="boton" name="submit" type="submit" value="Aceptar"> <input class="boton" type="reset" value="Cancelar"></td> 
      </tr> 
     </tbody> 
    </table> 

    </body> 

    </html>

來源

2016-05-16 Manply

參考jQuery的AJAX文檔瞭解更多信息：http://api.jquery.com/jquery.ajax/

如果你想提交編輯表單後使用AJAX，你會添加類似這在插入表格後在transformarEnEditable。

$("#userinfo").submit(function (event) { 
    event.preventDefault(); 
    $.ajax({ 
     method: "POST", 
     url: "envio.php", 
     data: { 
      nombre: $("#userinfo input[name='nombre']").val(), 
      precio: $("#userinfo input[name='precio']").val() 
     }, 
     success: function (data) { 
      // Do something with the data returned from envio.php. 
     }, 
     error: function (request, status, error) { 
      // Handle error. 
     } 
    }); 
});

我看到的另一個問題是，您最初有事件偵聽器$("#userinfo").submit(...)的#userinfo形式插入之前。 submit()只能在偵聽器創建時已經存在的元素上工作。

如果您想讓聽衆不在transformarEnEditable功能中，您可以使用on()（http://api.jquery.com/on/）。請注意稍後添加後代元素的委派事件的用法。您可以使用更具體的父母選擇器，但這裏我將使用body作爲示例：

$("body").on("submit", "#userinfo", function (event) { ... });

來源

2016-05-16 18:11:14

非常感謝您，它仍然有效！問題是當你加載動態表單來編輯 – Manply

對不起，我誤解了你想要解決的問題。你是否說在你提交動態表單時你無法獲得正確的行爲？我已經更新了我對你所問的問題的回答。 –

觀察使用'submit（）'後再次編輯。 –

動態JavaScript表格不能正常工作

回答

相關問題