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

我希望这会有所帮助

复制表单输入

1 个答案: