Question

我创建了一个表，该表显示数据库中的数据，并为用户提供了向其中添加行的选项。我还添加了必要的Ajax脚本，以便每当用户单击“添加”按钮时，表的底部都会出现一个新行。我找不到将用户在新添加的行中输入的数据保存到数据库中的方法。

 `<table border = "1" width = "50%" id="bill">
     <tr>
        <th>Item no</th>
        <th>Product Code</th>
        <th>Dates</th>
        <th>Quantity</th>
        <th>Amount</th>
        <th>Net Amount</th>
        <th>Tax</th>
        <th>Choose option</th>
     </tr>
     <c:forEach var = "row" items = "${result.rows}">
     <tr>
    <td><c:out value = "${row.Item_no}"/></td>
    <td><c:out value = "${row.Product_Code}"/></td>
    <td><c:out value = "${row.Dates}"/></td>
   <td><c:out value = "${row.Quantity}"/></td>
   <td><c:out value = "${row.Amount}"/></td>
   <td><c:out value="${row.Amount * row.Quantity}"/></td>
   <td><input type="text" name="Tax" value=""></td>
   <td><input type="text" name="gross" value=""></td> 
</tr>

' <input type="button" id="addrow" href="#" value="ADD"> //用于显示表的代码以及来自数据库的数据以及添加行选项

$(document).ready(function() {
var t = $('#bill');
var counter =  $('#bill tr').size() + 1;
console.log(counter);
$('#addrow').on( 'click', function () {
        t.append('<tr width="80%"><td><input type="text" name="Item_No" id="item" value = "" ></td><td><input type="text" name="Product_code" id="pc"></td>\n\
                    <td><input type="text" name="Date" id="date"></td><td><input type="text" name="Quantity" id="quantity"></td>\n\
                    <td><input type="text" name="Amount" id="amount"></td><td><input type="text" name="Net Amount" id="net"></td>\n\
                    <td><input type="text" name="Tax"  id="tax"></td><td><input type="text" name="Gross" id="gross"></td>\n\
                    </tr>');

    counter++;
} ); //The code which displays a new row at the bottom of the table when the users click add option . This is where the user enters his new data and I need to save it to the database.

Answer 1

每当您单击addrow时，都会在表中追加新行，因此有两种方法可以将值保存到数据库。它们如下：

1）。每当您添加新行时，用户都会在其中填充输入，然后可以在行中创建一个submit btn，即：

$('#addrow').on( 'click', function () {
        t.append('<tr width="80%">
    <form action="url" method="post">
   <td><input type="text" name="Item_No" id="item" value = "" ></td>
   <td><input type="text" name="Product_code" id="pc"></td>\n\
                       //your input field
    <td><input type="submit" name="submit" value="add to db"><td>
   </form>
   </tr>');
 counter++;
});

因此，每当您单击submit btn时，数据都会转到您提供的url，然后您就可以使用，request.getParameter("Product_code");来获取值并将值保存在数据库中。

2）。只要添加new row，也可以在其上添加按钮

$('#addrow').on( 'click', function () {
            t.append('<tr width="80%">

       <td><input type="text" name="Item_No" id="item" value = "" ></td>
       <td><input type="text" name="Product_code" id="pc"></td>\n\
                           //your input field
        <td><input type="button" name="submit" id="addtodb" value="add to db"><td>//add this button

       </tr>');
     counter++;
    });

当用户在btn上click时，您可以获取输入字段的所有值，然后pass to ajax并将它们保存在数据库中，如下所示：

$('#addtodb').on( 'click', function () {


 var pc=$("#pc").val();//getting value of input field
  var quantity=$("#quantity").val();

 $.ajax({  
            url:"yourclasspageurl",  
            method:"POST",  
            data:{ quantity:quantity,pc:pc} //passing data to specified url
            success:function(data){  
                 //do something
            }  
       });  

});

使用request.getParameter("quantity");获取所有以上相同的值，并将数据保存到数据库。

希望这对您有所帮助。

如何将Ajax中的一行数据保存到数据库？

1 个答案: