将动态html表格数据保存到表格（Laravel 5.2）

Question

我已经创建了一个动态表单来提出要约，但我不知道如何解决将数据保存到数据库的问题。我正在使用Laravel 5.2，现在我需要制作模型和控制器....有人可以帮助我吗？

如何将其保存到数据库表中？

我对提示和提示也是开放的，也许它可以以某种方式不同？

This is live form
JSFiddle

<div> 
<h1>Angebot</h1> 
<form method="POST" action="" accept-charset="UTF-8"> 
<table id="t1"> 
    <tr> 
     <th><button type="button" class="addRow">Personal hinzuf&uuml;gen</button></th> 
     <th>Anzahl</th> 
     <th>Preis pro Stunde</th> 
     <th>Stunden</th> 
     <th>Total</th> 
    </tr> 
    <tr id="row0" class="item"> 
     <td><select name="personal" class="select"><optgroup label="Personal"> 
      <option selected="true" disabled="true" style="display:none">--ausw&auml;hlen</option> 
      <option value="koeche">K&ouml;che</option> 
      <option value="barkeeper">Barkeeper</option> 
      <option value="garderobiere">Garderobiere</option> 
      <option value="chauffeure">Chauffeure</option> 
      <option value="oberkellner">Oberkellner</option> 
      <option value="serviceleitung">Serviceleitung</option> 
      <option value="hilfskoch">Hilfskoch</option> 
      <option value="servicekraefte">Servicekr&auml;fte</option> 
      </optgroup> 
      </select></td> 
     <td><input name="anzahl" class="qnty amount" value="" type="number" min="0" step="1"/></td> 
     <td><input name="preisps" class="price amount" value="" /></td> 
     <td><input name="stunden" class="hours amount" value="" /></td> 
     <td><input name="total" class="total" value="" readonly="readonly" /></td> 
    </tr> 
</table> 

<br /> 

<table id="t2"> 
    <tr> 
    <th>Netto =<br></th> 
    <th><input id="netto" readonly="readonly" name="netto" type="text" value=""></th> 
    </tr> 
    <tr> 
    <td>Steuer 19% =<br></td> 
    <td><input id="steuer" readonly="readonly" name="steuer" type="text" value=""></td> 
    </tr> 
    <tr> 
    <td>Brutto =<br></td> 
    <td><input id="brutto" readonly="readonly" name="brutto" type="text" value=""></td> 
    </tr> 
</table> 
    <br> 
    <input type="submit" value="Submit"> 
    <input type="reset" value="Reset"> 
    </form> 
</div> 

，这里是JavaScript代码

// main function when page is opened 
    $(document).ready(function() { 
     // function for adding a new row 
     var r = 0; 
     if(r<11){ 
      $('.addRow').click(function() { 
       r++; 
       $('#t1').append('<tr id="row' + r + '" class="item"><td><select name="personal' + r + '" class="select"><optgroup label="Personal"><option selected="true" disabled="true" style="display:none">--ausw&auml;hlen</option><option value="koeche">K&ouml;che</option><option value="barkeeper">Barkeeper</option><option value="garderobiere">Garderobiere</option><option value="chauffeure">Chauffeure</option><option value="oberkellner">Oberkellner</option><option value="serviceleitung">Serviceleitung</option><option value="hilfskoch">Hilfskoch</option><option value="servicekraefte">Servicekr&auml;fte</option></optgroup></select></td><td><input name="anzahl' + r + '" class="qnty amount" value="" type="number" min="0" step="1"/></td><td><input name="preisps' + r + '" class="price amount" value="" /></td><td><input name="stunden' + r + '" class="hours amount" value="" /></td><td><input name="total' + r + '" class="total" value="" readonly="readonly" /></td><td><button type="button" name="remove" id="' + r + '" class="btn_remove">X</button></td></tr>'); 
      }); 
      // remove row when X is clicked 
      $(document).on("click", ".btn_remove", function() { 
       var button_id = $(this).attr("id"); 
       $("#row" + button_id + '').remove(); 
      }); 

      // calculate everything 
      $(document).on("keyup", ".amount", calcAll); 
     } 
    }); 

    // function for calculating everything 
    function calcAll(event) { 
     // calculate total for one row 
      $(".item").each(function() { 
      var qnty = 1; 
      var price = 1; 
      var hours = 1; 
      var total = 1; 
      if (!isNaN(parseFloat($(this).find(".qnty").val()))) { 
       qnty = parseFloat($(this).find(".qnty").val()); 
      } 
      if (!isNaN(parseFloat($(this).find(".price").val()))) { 
       price = parseFloat($(this).find(".price").val()); 
      } 
      if (!isNaN(parseFloat($(this).find(".hours").val()))) { 
       hours = parseFloat($(this).find(".hours").val()); 
      } 
      total = qnty * price * hours; 
      $(this).find(".total").val(total.toFixed(2)); 
     }); 


     // sum all totals 
     var sum = 0; 
     $(".total").each(function() { 
      if (!isNaN(this.value) && this.value.length != 0) { 
       sum += parseFloat(this.value); 
      } 
     }); 

     // show values in netto, steuer, brutto fields 
     $("#netto").val(sum.toFixed(2)); 
     $("#steuer").val(parseFloat(sum * 0.19).toFixed(2)); 
     $("#brutto").val(parseFloat(sum + parseFloat(($("#steuer").val()))).toFixed(2)); 

    } 

    // replace , with . and block writing letters 
    $.fn.ForceNumericOnly = function() { 
      return this.each(function() { 
      if($(this).data('forceNumericOnly')){ return; } 
      $(this).data('forceNumericOnly', true); 
       $(this).keydown(function(e) { 
        if(e.keyCode==188 || e.keyCode==110 || e.keyCode==108){ 
         e.preventDefault(); 
         $(this).val($(this).val() + '.'); 
        } 
         var key = e.charCode || e.keyCode || 0; 
         return (key == 8 || key == 9 || key == 46 || key == 110 || key == 188 || key == 190 || (key >= 35 && key <= 40) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));     
       }); 
      }); 
    }; 
    // execute function on element focus 
    $(document).on('focus', '.amount', function(){ 
     $(this).ForceNumericOnly(); 
    }); 

Answer 1

对于第一个问题

1）你加 “R” 的行变量在错误的地点限制所以请在下面添加如下

var r = 1; 
$('.addRow').click(function() { 
    if(r<10) 
     { 
     r++; 
     $('#t1').append('<tr id="row' + r + '" class="item"><td><select name="personal' + r + '" class="select"><optgroup label="Personal"><option selected="true" disabled="true" style="display:none">--ausw&auml;hlen</option><option value="koeche">K&ouml;che</option><option value="barkeeper">Barkeeper</option><option value="garderobiere">Garderobiere</option><option value="chauffeure">Chauffeure</option><option value="oberkellner">Oberkellner</option><option value="serviceleitung">Serviceleitung</option><option value="hilfskoch">Hilfskoch</option><option value="servicekraefte">Servicekr&auml;fte</option></optgroup></select></td><td><input name="anzahl' + r + '" class="qnty amount" value="" type="number" min="0" step="1"/></td><td><input name="preisps' + r + '" class="price amount" value="" /></td><td><input name="stunden' + r + '" class="hours amount" value="" /></td><td><input name="total' + r + '" class="total" value="" readonly="readonly" /></td><td><button type="button" name="remove" id="' + r + '" class="btn_remove">X</button></td></tr>'); 
     } 
    }); 

    // remove row when X is clicked 
    $(document).on("click", ".btn_remove", function() { 
     r--; 
     var button_id = $(this).attr("id"); 
      $("#row" + button_id + '').remove(); 
     }); 

上述变更后，您只会在表中添加10行。

2）您需要从创建的表结构中创建一个json，并通过ajax在服务器端传递该json，并在服务器端解析您的json并将该信息存储在数据库中。

从表格设计看起来它会是2表格一张表格有主信息和另一个具有详细信息的详细表格。

请让我知道你是否需要这样的示例代码。