在表单输入中复制行

Question

我是 JS 新手，遇到一个无法解决的问题。我有一个动态表，它根据 onclick 事件添加行。问题是我想通过单击表格末尾的按钮在同一页面上的另一个输入字段中创建所有行。 任何人都可以帮助我，好吗？ 在这里你可以找到表格的代码：

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

还有形式：

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

还有 JS 统治桌子：

  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

我猜addproduct是将行添加到表单的按钮，您需要在js代码中添加它。

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

如果你使用 jquery，这个功能应该可以工作

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);
}

希望对你有帮助