Zeile in einer Formulareingabe kopieren

Question

Ich bin neu in JS und ich habe ein Problem, das ich nicht lösen kann. Ich habe eine dynamische Tabelle, die Zeilen basierend auf onclick Ereignissen hinzufügt. Das Problem ist, dass ich möchte alle Zeilen in einem anderen Eingabefeld auf der gleichen Seite erstellt haben, indem Sie auf eine Schaltfläche am Ende der Tabelle klicken. Kann mir bitte jemand helfen? Hier können Sie den Code der Tabelle finden:

<table id="orderedProductsTbl"> 
    <thead> 
     <tr> 
      <td class="h2" style="padding-top:30px;">Esperienze</td> 
      <td class="h1" height="80" width="50px" align="right"></td> 
      <td height="80" width="50px" class="titlerow" align="left"></td> 
     </tr> 
    </thead> 
    <tbody id="orderedProductsTblBody">       
    </tbody> 
    <tfoot> 
     <tr class="totalColumn"> 
      <td>Totale</td> 
      <td align="right">€</td> 
      <td class="totalCol" align="center"></td> 
     </tr> 
    </tfoot> 
</table> 

Und die Form:

<fieldset class="pure-group" style=""> 
    <label for="name">Nome: </label> 
    <input id="name" name="name" placeholder="What your Mom calls you" /> 
</fieldset> 

<fieldset class="pure-group"> 
    <label for="surname">Cognome: </label> 
    <input id="surname" name="surname" /> 
</fieldset> 

<fieldset class="pure-group"> 
    <label for="email"><em>Your</em> Email Address:</label> 
    <input id="email" name="email" type="email" value="" 
    required placeholder="your.name@email.com"/> 
    <span id="email-invalid" style="visibility:hidden"> 
    Must be a valid email address</span> 
</fieldset> 

<fieldset class="pure-group"> 
    <label for="date">Data:</label> 
    <input id="date" name="date" type="text"/> 
</fieldset> 

<fieldset class="pure-group"> 
    <label for="time">Ora:</label> 
    <input id="time" name="time" /> 
</fieldset> 

<fieldset class="pure-group"> 
    <label for="pax">Numero di Persone: </label> 
    <input id="pax" name="pax" /> 
</fieldset> 

<fieldset class="pure-group"> 
    <label for="message">Esperienze: </label> 
    <textarea id="message" name="message" rows="5"></textarea> 
</fieldset> 
</div> 
<button class="boxh">INVIA</button> 
</form> 

und die JS herrschenden die Tabelle:

var shoppingCart = []; 

    //this function manipulates DOM and displays content of our shopping cart 
    function displayShoppingCart(){ 
     var orderedProductsTblBody=document.getElementById("orderedProductsTblBody"); 
     //ensure we delete all previously added rows from ordered products table 
     while(orderedProductsTblBody.rows.length>0) { 
      orderedProductsTblBody.deleteRow(0); 
     } 

     //variable to hold total price of shopping cart 
     var cart_total_price=0; 
     //iterate over array of objects 
     for(var product in shoppingCart){ 
      //add new row  
      var row=orderedProductsTblBody.insertRow(); 
      //add button 
      var removeRow=document.createElement("Button"); 
      //add button2 
      var addproduct=document.createElement("Button"); 
      //set up button 
      removeRow.innerHTML= "X"; 
      removeRow.setAttribute("onClick", "deleteRow(this)"); 
      removeRow.className = "btad"; 
      //set up button2 
      addproduct.innerHTML= "PRENOTA"; 
      addproduct.className = "btad1";    
      //create four cells for product properties 
      var cellName = row.insertCell(0); 
      var cellDescription = row.insertCell(1); 
      var cellPrice = row.insertCell(2); 
      var cellDelete = row.insertCell(3); 
      var cellAdd =row.insertCell(4); 
      cellName.className = 'copyname'; 
      cellPrice.className = 'rowDataSd'; 
      cellPrice.align="center"; 
      cellDescription.align ="right"; 
      cellDelete.align="right"; 
      cellName.height="40"; 
      cellPrice.height="40"; 
      cellDescription.height="40"; 
      cellDelete.height="40" 
      cellAdd.height="40" 
      //fill cells with values from current product object of our array 
      cellName.innerHTML = shoppingCart[product].Name; 
      cellDescription.innerHTML = shoppingCart[product].Description; 
      cellPrice.innerHTML = shoppingCart[product].Price; 
      cellDelete.appendChild(removeRow); 
      cellAdd.appendChild(addproduct); 
      cart_total_price+=shoppingCart[product].Price; 
     } 

    function AddtoCart(name,description,price){ 
     //Below we create JavaScript Object that will hold the properties you have mentioned: Name,Description and Price 
     var singleProduct = {}; 
     //Fill the product object with data 
     singleProduct.Name=name; 
     singleProduct.Description=description; 
     singleProduct.Price=price; 
     //Add newly created product to our shopping cart 
     shoppingCart.push(singleProduct); 
     //call display function to show on screen 
     displayShoppingCart(); 
    } 

Answer 1

ich, dass erraten bin Das Add-Produkt ist die Schaltfläche, die die Zeile zum Formular hinzufügen, Sie müssen dies auf dem Js-Code hinzufügen.

`addproduct.setAttribute("onClick", "AddRowToForm(this)");` 

wenn Sie jquery diese Funktion verwenden sollten

function AddRowToForm(row){ 
    // get the values from the table 
    var name = $("#"+row).find('td').eq(0).html(); 
    // "eq(0)" is the numer of the column of the table 
    var surname = $("#"+row).find('td').eq(1).html(); 
    var email= $("#"+row).find('td').eq(2).html(); 
    var date = $("#"+row).find('td').eq(3).html(); 
    var time = $("#"+row).find('td').eq(4).html(); 
    var pax = $("#"+row).find('td').eq(5).html(); 
    var message = $("#"+id).find('td').eq(6).html(); 
    // insert values to the Form 
    $("#name").val(name); 
    $("#surname").val(surname); 
    $("#email").val(email); 
    $("#date").val(date); 
    $("#time").val(time); 
    $("#pax").val(pax); 
    $("#message").val(message); 
} 

Ich hoffe, das hilft